JavaScript添加行级合计属性

<table>
  <tr>
    <th>商品</th>
    <th>数量</th>
    <th class="subtotal">小计</th>
  </tr>
  <tr>
    <td>商品A</td>
    <td>2</td>
    <td class="subtotal">20</td>
  </tr>
  <tr>
    <td>商品B</td>
    <td>3</td>
    <td class="subtotal">30</td>
  </tr>
  <tr>
    <td>商品C</td>
    <td>4</td>
    <td class="subtotal">40</td>
  </tr>
</table>

// 获取所有具有"subtotal" class属性的单元格
var subtotalCells = document.getElementsByClassName("subtotal");

// 初始化合计值
var total = 0;

// 遍历每个单元格，累加合计值
for (var i = 0; i < subtotalCells.length; i++) {
  var cellValue = parseFloat(subtotalCells[i].textContent);
  total += cellValue;
}

// 输出合计值
console.log("合计值：" + total);

// 创建一个新的行
var newRow = document.createElement("tr");

// 创建一个新的单元格
var totalCell = document.createElement("td");

// 设置单元格的内容为合计值
totalCell.textContent = "合计：" + total;

// 将单元格添加到新行中
newRow.appendChild(totalCell);

// 将新行添加到表格中的某个位置
var table = document.getElementsByTagName("table")[0];
table.appendChild(newRow);