题解 | #购物车#
购物车
https://www.nowcoder.com/practice/3b4a342351ce483e813e5588446fc1f8
简洁、易读
1. 封装一个公共函数用来计算total和渲染
2. add考察createElement 和appendChild
3. bind考察事件冒泡机制， 为tbody添加click事件
4. 注意保留两位小数
function resetTotal() {
const prices = [];
const trs = Array.from(document.querySelectorAll('tbody tr'));
for (let tr of trs) {
let td = tr.children[1];
let price = parseFloat(td.innerText);
prices.push(price);
}
const tTotal = document.querySelector('tfoot tr td');
const total = prices.reduce((a, b) => a + b, 0);
tTotal.innerHTML = `${total.toFixed(2)}(${prices.length}件商品)`;
}
function add(items) {
const tbody = document.querySelector('tbody');
for (let item of items) {
const tr = document.createElement('tr');
tr.innerHTML = `<td>${item.name}</td><td>${item.price.toFixed(2)}</td><td><a href="javascript:void(0);">删除</a></td>`;
tbody.appendChild(tr);
}
resetTotal();
}
function bind() {
const tbody = document.querySelector('tbody');
tbody.addEventListener('click', (e) => {
if (e.target.tagName === 'A') {
const tr = e.target.parentNode.parentNode;
tbody.removeChild(tr);
resetTotal();
}
})
}
。