js table行列合计计算案例

下面是一个简单的JavaScript表格行列合计计算案例：

HTML代码：

<table id="myTable">
  <thead>
    <tr>
      <th>商品</th>
      <th>价格</th>
      <th>数量</th>
      <th>小计</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>商品A</td>
      <td>10.00</td>
      <td><input type="number" value="1" onchange="updateSubtotal(this)"></td>
      <td class="subtotal"></td>
    </tr>
    <tr>
      <td>商品B</td>
      <td>20.00</td>
      <td><input type="number" value="2" onchange="updateSubtotal(this)"></td>
      <td class="subtotal"></td>
    </tr>
    <tr>
      <td>商品C</td>
      <td>30.00</td>
      <td><input type="number" value="3" onchange="updateSubtotal(this)"></td>
      <td class="subtotal"></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="2">合计</th>
      <td id="totalQty"></td>
      <td id="total"></td>
    </tr>
  </tfoot>
</table>

JavaScript代码：

function updateSubtotal(input) {
  var row = input.parentNode.parentNode;
  var price = row.cells[1].textContent;
  var qty = input.value;
  var subtotal = price * qty;
  row.cells[3].textContent = subtotal.toFixed(2);
  updateTotal();
}

function updateTotal() {
  var totalQty = 0;
  var total = 0;
  var rows = document.getElementById("myTable").rows;
  for (var i = 1; i < rows.length - 1; i++) {
    var qty = parseInt(rows[i].cells[2].children[0].value);
    var subtotal = parseFloat(rows[i].cells[3].textContent);
    totalQty += qty;
    total += subtotal;
  }
  document.getElementById("totalQty").textContent = totalQty;
  document.getElementById("total").textContent = total.toFixed(2);
}

该代码中，我们首先定义了一个`updateSubtotal`函数，它接收一个输入元素作为参数，计算并更新该行的小计。然后我们定义了一个`updateTotal`函数，它循环所有行（除了表头和表尾），并计算行数和总计。最后，我们在输入元素的`onchange`事件和页面加载时调用`updateTotal`函数来更新表格的合计。