Jquery 在某个索引处向表中插入新行

我知道如何使用 jquery 在表中添加或预先添加新行:

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

如何将行(在 html 变量中给定)插入到特定的“ row index”i中。因此，例如，如果 i=3，该行将作为表中的第4行插入。

154555 次浏览
小开 
$($('#my_table > tbody:last')[index]).append(html);
小开

试试这个:

var i = 3;


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

or this:

var i = 3;


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

或者这样:

var i = 4;


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

所有这些都会将行放置在相同的位置。

小开
最佳答案

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

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

索引是基于0的，因此要成为第4行，您需要 i-1，因为 .eq(3)将是第4行，所以您需要返回到第3行(2)并插入 .after()。

小开

使用 等式选择器选择第 n 行(从0开始) ，并使用 之后在它后面添加行，因此:

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

Html 在哪里是 tr

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

try this:

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

注:

$('#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
//i.e. between thead and tbody
//.before() will also work similar
小开

我知道它来得有点晚，但是对于那些想要纯粹使用 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;
}

这将在单击按钮的行的正下方添加新的表行。

小开

在补充 Nick Craver 的回答的同时，考虑到 rossisdead 提出的观点，如果场景的存在就像一个必须附加到一个空表，或者在某一行之前，我已经这样做了:

var arr = []; //array
if (your condition) {
arr.push(row.id); //push row's id for eg: to the array
idx = arr.sort().indexOf(row.id);


if (idx === 0) {
if (arr.length === 1) {  //if array size is only 1 (currently pushed item)
$("#tableID").append(row);
}
else {       //if array size more than 1, but index still 0, meaning inserted row must be the first row
$("#tableID tr").eq(idx + 1).before(row);
}
}
else {     //if index is greater than 0, meaning inserted row to be after specified index row
$("#tableID tr").eq(idx).after(row);
}
}

希望能帮到别人。

小开

To add the right under a specific node(data-tt-id), this worked for me:

var someValue = "blah-id";


$("#tableID > tbody > tr[data-tt-id="' + someValue + '"]').after(row);

提交答案