购物车清单表格必须包含商品名称、单价、数量（用）、小计、删除按钮五列；数量修改需监听input/change事件并用data-id标识商品；删除行应调用row.remove()并确认提示；总价须单独div展示、金额保留两位小数。
表格结构必须包含哪些核心列
购物车清单不是普通表格，它得支持用户实时操作，所以至少要有：商品名称、单价、数量、小计、删除按钮。少任何一列，用户就无法完成“改数量”或“删商品”动作。特别注意：数量列必须用 <input type="number">，不能用纯文本——否则 JS 读取时容易拿到空值或字符串，后续计算会出错。
如何让数量修改自动更新小计和总价
靠纯 HTML 做不到自动计算，必须加轻量 JS。关键点在于监听每个数量输入框的 change 和 input 事件（后者支持实时响应，比如用鼠标滚轮调数量）。每个 <input> 应该有唯一标识，推荐用 data-id 属性绑定商品 ID，而不是依赖 DOM 位置索引——否则删行后索引错乱，计算就全乱了。
示例逻辑片段：
document.querySelectorAll('input[name="quantity"]').forEach(input => {
input.addEventListener('input', function() {
const row = this.closest('tr');
const price = parseFloat(row.querySelector('.price').textContent);
const qty = parseInt(this.value) || 0;
row.querySelector('.subtotal').textContent = (price * qty).toFixed(2);
updateTotal(); // 另一个函数，汇总所有 .subtotal
});
});
删除按钮点击后如何安全移除对应行
不要用 innerHTML = '' 或清空整个表格再重绘，那样会丢失所有已绑定的事件监听器，导致后续数量修改失效。正确做法是调用 row.remove()，它只删 DOM 节点，不影响其他行的事件绑定。
常见坑：
- 删除按钮写成
<button onclick="removeRow(this)"></button>—— 这种内联 JS 很难维护，且this指向容易混淆 - 没在删除前确认，用户手滑点错就丢数据 —— 至少加个
if (!confirm('确定删除？')) return; - 删完不调用
updateTotal()—— 总价卡在旧值，用户以为没删成功
总价显示和响应式对齐的细节处理
总价放在表格底部，但别用 <tfoot> 然后塞进最后一行 —— 很多 CSS 框架（比如 Bootstrap）会对 <code><tfoot> 特殊处理，导致列宽错位。更稳妥的是单独放一个 <code><div class="cart-total"> 在表格外，用 CSS 控制对齐。<p>金额一律保留两位小数，用 <code>Number.toFixed(2)，别用 Math.round() —— 后者会把 19.995 四舍五入成 20，而实际应显示 19.99（银行常用截断逻辑，但电商一般用四舍五入，需按业务定）。
移动端要注意：数量输入框默认宽度太窄，iOS 上数字键盘可能不弹出，加 style="width: 60px" 或统一用 min-width 控制。
