如何使用jquery根据另一列从表中删除列行值

Question

我有一个与动态安装表有关的问题。

所以我想知道如何使用jquery根据另一列的值编辑表格从行中删除值？例如，我有下表：

Start	End	balance	Trail	Id
01/11/2022	01/15/2022	4	high stretch	2
01/11/2022	01/15/2022	4	low stretch	2
01/25/2022	01/30/2022	6	high stretch	4
01/25/2022	01/30/2022	6	inert stretch	4
01/25/2022	01/30/2022	6	low stretch	4

鉴于此表，我想根据 Id 列进行合并，删除余额值，因为它们针对相同的 Id 重复，最后求和，返回余额总计。

所以新表看起来像这样：

Start	End	balance	Trail	Id
01/11/2022	01/15/2022	4	high stretch	2
01/11/2022	01/15/2022		low stretch	2
01/25/2022	01/30/2022	6	high stretch	4
01/25/2022	01/30/2022		inert stretch	4
01/25/2022	01/30/2022		low stretch	4
Total		10

知道如何用 jquery 做到这一点吗？

一个重要的细节，这个表是动态生成的，所以我可以使用来自其他 Id 或相同 Id 的其他值生成更多行。

Answer 1

function sumBalance(){
  var table = document.getElementById("balanceTbl");
  var tbody = table.tBodies[0];
  var tr = table.tBodies[0].rows;
  var totalBal = 0;
  for(i=0; i < tr.length;i++){
    var balance = tbody.rows[i].cells[2].children[0].value;
    totalBal += Number(balance);
  }
  document.getElementById("total").innerHTML = totalBal;
}
sumBalance();

document.querySelectorAll("input[name=balance]").forEach(function(balanceElem,pos){
  balanceElem.addEventListener("input",function(){
    sumBalance();
  })
})

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

<table id="balanceTbl">
<thead>
<tr>
<th>Start</th>
<th>End</th>
<th>balance</th>
<th>Trail</th>
<th>Id</th>
</tr>
</thead>
<tbody>
<tr>
<td>01/11/2022</td>
<td>01/15/2022</td>
<td><input type="text" name="balance" value="4" size="2"></td>
<td>high stretch</td>
<td>2</td>
</tr>
<tr>
<td>01/11/2022</td>
<td>01/15/2022</td>
<td><input type="text" name="balance" value="4" size="2"></td>
<td>low stretch</td>
<td>2</td>
</tr>
<tr>
<td>01/25/2022</td>
<td>01/30/2022</td>
<td><input type="text" name="balance" value="6" size="2"></td>
<td>high stretch</td>
<td>4</td>
</tr>
<tr>
<td>01/25/2022</td>
<td>01/30/2022</td>
<td><input type="text" name="balance" value="6" size="2"></td>
<td>inert stretch</td>
<td>4</td>
</tr>
<tr>
<td>01/25/2022</td>
<td>01/30/2022</td>
<td><input type="text" name="balance" value="6" size="2"></td>
<td>low stretch</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<td>Total</td>
<td></td>
<td id="total"></td>
<td></td>
<td></td>
</tfoot>
</table>

不要使用 id，因为在 HTML 中，每个元素之间的 id 应该是唯一的，而不是 ID 使用名称或类。尝试更改余额并查看总数。希望这个样本会有所帮助。谢谢