使用JavaScript如何将勾选的菜品表格行设置为绿色背景？

云上老周

2026-9-25

实现方案

你只需对现有JS代码做3处调整即可完成需求：

提交订单时先清空所有表格行的背景色，避免历史勾选状态残留
遍历已勾选的菜品复选框时，通过closest()方法找到当前复选框所属的表格行，单独设置绿色背景
重置订单时同步清空所有行的背景色，保证页面状态和表单状态统一

以下是修改后的完整JS代码：

document.getElementById("mydiv").style.borderColor = "red";
const totalBillBox = document.getElementById('totalBillBox');

function resetOrder() {
  event.preventDefault();
  myForm.reset();
  totalBillBox.innerText = "";
  // 重置所有行的背景色
  document.querySelectorAll('table tr').forEach(tr => tr.style.backgroundColor = 'transparent');
}

function billDo() {
  event.preventDefault();
  // 先重置所有行的背景色，清除上次勾选的样式
  document.querySelectorAll('table tr').forEach(tr => tr.style.backgroundColor = 'transparent');

  let orderedDishes = document.querySelectorAll('input[type="checkbox"]:checked');
  let totalBill = 0;

  orderedDishes.forEach((orderedDish) => {
    totalBill += +orderedDish.parentNode.previousElementSibling.innerText * orderedDish.parentNode.nextElementSibling.nextElementSibling.children[0].value;
    // 找到当前复选框所属的表格行，设置绿色背景
    const currentDishRow = orderedDish.closest('tr');
    currentDishRow.style.backgroundColor = 'lightgreen';
  });

  // 补全不满500元时的总价显示逻辑
  if (totalBill >= 500) {
    const discountBill = 0.90 * totalBill;
    totalBillBox.innerText = discountBill;
  } else {
    totalBillBox.innerText = totalBill;
  }
}