jquery插入新的行到表中的某个索引

我知道如何使用jquery将一个新行添加或添加到表中：

$('#my_table > tbody:last').append(html); 

如何将行（在htmlvariables中给出）插入到特定的“行索引”中。 所以，如果i=3 ，例如，该行将被插入作为表中的第四行。

Answer 1

你可以像这样使用.eq()和.eq()

 $('#my_table > tbody > tr').eq(i-1).after(html); 

因为.eq(3)是第四行，所以你需要返回第三行（ 2 ）并且插入.after() ，这个索引是基于0的，所以作为第四行，你需要i-1 。 。

Answer 2

尝试这个：

 var i = 3; $('#my_table > tbody > tr:eq(' + i + ')').after(html); 

或这个：

 var i = 3; $('#my_table > tbody > tr').eq( i ).after(html); 

或这个：

 var i = 4; $('#my_table > tbody > tr:nth-child(' + i + ')').after(html); 

所有这些将把行放在相同的位置。 nth-child使用基于1的索引。

Answer 3

注意：

 $('#my_table > tbody:last').append(newRow); // this will add new row inside tbody $("table#myTable tr").last().after(newRow); // this will add new row outside tbody //ie between thead and tbody //.before() will also work similar 

Answer 4

使用eqselect器select第n行（从0开始），并使用after添加行，所以：

 $('#my_table > tbody:last tr:eq(2)').after(html); 

其中html是一个tr

Answer 5

 $('#my_table tbody tr:nth-child(' + i + ')').after(html); 

Answer 6

尝试这个：

 $("table#myTable tr").last().after(data); 

Answer 7

我知道它迟到了，但对于那些想纯粹使用JavaScript实现的人来说，可以这样做：

1. 获取被点击的当前tr的引用。
2. 制作一个新的tr DOM元素。
3. 将它添加到引用的tr父节点。

HTML：

 <table> <tr> <td> <button id="0" onclick="addRow()">Expand</button> </td> <td>abc</td> <td>abc</td> <td>abc</td> <td>abc</td> </tr> <tr> <td> <button id="1" onclick="addRow()">Expand</button> </td> <td>abc</td> <td>abc</td> <td>abc</td> <td>abc</td> </tr> <tr> <td> <button id="2" onclick="addRow()">Expand</button> </td> <td>abc</td> <td>abc</td> <td>abc</td> <td>abc</td> </tr> 

在JavaScript中：

 function addRow() { var evt = event.srcElement.id; var btn_clicked = document.getElementById(evt); var tr_referred = btn_clicked.parentNode.parentNode; var td = document.createElement('td'); td.innerHTML = 'abc'; var tr = document.createElement('tr'); tr.appendChild(td); tr_referred.parentNode.insertBefore(tr, tr_referred.nextSibling); return tr; } 

这会将新的表格行添加到单击该button的行的正下方。

Answer 8

 $($('#my_table > tbody:last')[index]).append(html);