Question

我有一个包含6列的表，其中5列是弹出的，所有行的最后一列都是空的。

现在我需要在每行的最后一列添加一些数据，如何使用for循环遍历表并执行相同的操作？

Answer 1

您可以使用rows语句的for of集合，然后使用每行的.cells集合来获取最后一个。

for (const row of document.querySelector("#myTable").rows) {
  row.cells[row.cells.length-1].textContent = "some dynamic data";
}

table td:last-child {
  background: #DDD;
}

<table id=myTable>
<tbody>
<tr><td>first</td><td>second</td><td>third</td><td>fourth</td><td></td>
<tr><td>first</td><td>second</td><td>third</td><td>fourth</td><td></td>
<tr><td>first</td><td>second</td><td>third</td><td>fourth</td><td></td>
<tr><td>first</td><td>second</td><td>third</td><td>fourth</td><td></td>
<tr><td>first</td><td>second</td><td>third</td><td>fourth</td><td></td>
</tbody>
</table>

或者使用querySelectorAll直接选择每行的最后一个单元格。

for (const cell of document.querySelectorAll("#myTable td:last-child")) {
  cell.textContent = "some dynamic data";
}

table td:last-child {
  background: #DDD;
}

<table id=myTable>
<tbody>
<tr><td>first</td><td>second</td><td>third</td><td>fourth</td><td></td>
<tr><td>first</td><td>second</td><td>third</td><td>fourth</td><td></td>
<tr><td>first</td><td>second</td><td>third</td><td>fourth</td><td></td>
<tr><td>first</td><td>second</td><td>third</td><td>fourth</td><td></td>
<tr><td>first</td><td>second</td><td>third</td><td>fourth</td><td></td>
</tbody>
</table>

您甚至可以在选区中添加:empty以仅选择空单元格。 document.querySelectorAll("#myTable td:last-child:empty")

Answer 2

此处您还有一个jQuery解决方案https://jsfiddle.net/5htkr87L/

$('#myTable tbody tr').each(function(){
	$(this).find('td').last().html("Last");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
  <tbody>
    <tr><td>first</td><td>second</td><td>third</td><td>fourth</td><td></td>
    <tr><td>first</td><td>second</td><td>third</td><td>fourth</td><td></td>
    <tr><td>first</td><td>second</td><td>third</td><td>fourth</td><td></td>
    <tr><td>first</td><td>second</td><td>third</td><td>fourth</td><td></td>
    <tr><td>first</td><td>second</td><td>third</td><td>fourth</td><td></td>
  </tbody>
</table>

我使用了jQuery .each方法来遍历所有的tr＆amp;使用jQuery last方法查找最后一个。

希望这会对你有所帮助。

如何将记录添加到第n行表jquery的第r列？

2 个答案: