n行目のテーブルjqueryのr番目の列にレコードを追加するには？

Question

私は5つのpoplatedとすべての行の最後の列が空である6列を持つテーブルを持っています。

各行の最後の列にデータを追加する必要があります。forループを使用してテーブルをループする方法は同じですか？

Answer 1

for ofステートメントを使用してrowsコレクションを使用し、各行に.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

私はjQuerylastメソッドを使用して、最後のTD探して、すべてのTR &をループにjQuery.eachメソッドを使用しました1つの以上jQueryソリューションhttps://jsfiddle.net/5htkr87L/

$('#myTable tbody tr').each(function(){ 
 
\t $(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>

で行きます。

希望すると、これが役立ちます。