您的位置：首页 > Web前端 > JavaScript

校招编程题目(2) JavaScript：购物车操作(京东)

2017-09-09 23:06 405 查看

题目描述

给出html和css代码，实现了一个购物车界面如下：

要求实现以下两个函数(不允许使用任何库)：

1.

function add(items){}

：在列表后面添加items商品信息，items为{name:String, price:Number}所组成的数组。

2.

function bind()

：点击每一行的删除，从列表中删除对应的行。

注意同步更新统计信息，price精确到小数点后两位。

给出的html代码如下：

<!DOCTYPE html>
<html lang="en">
<body>
<table id="jsTrolley">
<thead><tr><th>名称</th><th>价格</th><th>操作</th></tr></thead>
<tbody>
<tr><td>产品1</td><td>10.00</td><td><a href="javascript:void(0);">删除</a></td></tr>
<tr><td>产品2</td><td>30.20</td><td><a href="javascript:void(0);">删除</a></td></tr>
<tr><td>产品3</td><td>20.50</td><td><a href="javascript:void(0);">删除</a></td></tr>
</tbody>
<tfoot><tr><th>总计</th><td colspan="2">60.70(3件商品)</td></tr></tfoot>
</table>
</body>
</html>

给出的css代码如下：

body,html{
padding: 0;
margin: 0;
font-size: 14px;
color: #000000;
}
table{
border-collapse: collapse;
width: 100%;
table-layout: fixed;
}
thead{
background: #3d444c;
color: #ffffff;
}
td,th{
border: 1px solid #e1e1e1;
padding: 0;
height: 30px;
line-height: 30px;
text-align: center;
}

我的答案

/*
// 代码测试
window.onload = function(){
add([{name: 'test1', price: 11.223}, {name: 'test2', price: 2.333}]);
bind();
}*/
function add(items) {
if(items.length==0) return;
for(var i=0; i<items.length; i++){
var item = items[i];

var newLine = document.createElement('tr');
var firstCol = document.createElement('td');
var pName = document.createTextNode(item['name']);
firstCol.appendChild(pName);
newLine.appendChild(firstCol);

var secondCol = document.createElement('td');
var pPrice = document.createTextNode(item['price'].toFixed(2));
secondCol.appendChild(pPrice);
newLine.appendChild(secondCol);

var thirdCol = document.createElement('td');
var link = document.createElement('a');
link.href = "javascript:void(0);";
link.innerHTML = "删除";
thirdCol.appendChild(link);
newLine.appendChild(thirdCol);

var tbody = document.getElementsByTagName("tbody")[0];
tbody.appendChild(newLine);

updateSum(true, item['price'].toFixed(2));
}
//bind(); // 若出错，可以防止调用add后不调用bind绑定事件
}

function bind() {
// 为每个链接绑定事件
var links = document.getElementsByTagName("a");
for(var i=0; i<links.length; i++){
links[i].addEventListener("click", deleteRow);
}

// 删除一行
function deleteRow(e){
// 首先得到对应的行元素tr
var tr = e.target.parentNode.parentNode;
// 先获得商品的价格用以更新统计信息
var price = parseFloat(tr.childNodes[1].childNodes[0].nodeValue);
updateSum(false, price.toFixed(2));

// 删除tr
tr.parentNode.removeChild(tr);
}
}

// 更新统计信息
function updateSum(add, price) { // add=true表示添加，false表示删除
var sign = add?1:-1;
var sum = document.getElementsByTagName("tfoot")[0].childNodes[0].childNodes[1];
var matcher1 = new RegExp("([0-9]*\\.[0-9][0-9])"); // 修改总价
sum.innerHTML.match(matcher1);
var newSum = sum.innerHTML.replace(matcher1, (parseFloat(RegExp.$1)+sign*parseFloat(price)).toFixed(2));
var matcher2 = new RegExp("\\(([0-9]*)"); // 修改物品数目
newSum.match(matcher2);
newSum = newSum.replace(matcher2, "("+(parseInt(RegExp.$1)+sign));
sum.innerHTML = newSum;
}

总结

这个代码并未提交，所以不能保证通过。

循环绑定事件注意回调陷阱。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航