题目描述
给出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;
}
总结
- 这个代码并未提交,所以不能保证通过。
- 循环绑定事件注意回调陷阱。