[英]Jquery insert new row into table at a certain index
I know how to append or prepend a new row into a table using jquery:我知道如何使用 jquery 将新行追加或添加到表中:
$('#my_table > tbody:last').append(html);
How to I insert the row (given in the html variable) into a specific "row index" i
.如何将行(在 html 变量中给出)插入特定的“行索引” i
。 So if i=3
, for instance, the row will be inserted as the 4th row in the table.因此,例如,如果i=3
,该行将作为表中的第 4 行插入。
You can use .eq()
and .after()
like this: 您可以使用.eq()
和.after()
是这样的:
$('#my_table > tbody > tr').eq(i-1).after(html);
The indexes are 0 based, so to be the 4th row, you need i-1
, since .eq(3)
would be the 4th row, you need to go back to the 3rd row ( 2
) and insert .after()
that. 索引是基于0的,所以要成为第4行,你需要i-1
,因为.eq(3)
将是第4行,你需要回到第3行( 2
)并插入.after()
。
Try this: 试试这个:
var i = 3;
$('#my_table > tbody > tr:eq(' + i + ')').after(html);
or this: 或这个:
var i = 3;
$('#my_table > tbody > tr').eq( i ).after(html);
or this: 或这个:
var i = 4;
$('#my_table > tbody > tr:nth-child(' + i + ')').after(html);
All of these will place the row in the same position. 所有这些都将行放在相同的位置。 nth-child
uses a 1 based index. nth-child
使用基于1的索引。
Note: 注意:
$('#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
I know it's coming late but for those people who want to implement it purely using the JavaScript
, here's how you can do it: 我知道它已经晚了但是对于那些想要纯粹使用JavaScript
实现它的人来说,这里是你可以做到的:
tr
which is clicked. 获取对单击的当前tr
的引用。 tr
DOM element. 创建一个新的tr
DOM元素。 tr
parent node. 将其添加到引用的tr
父节点。 HTML: 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>
In JavaScript: 在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;
}
This will add the new table row exactly below the row on which the button is clicked. 这会将新表格行添加到单击按钮的行的正下方。
试试这个:
$("table#myTable tr").last().after(data);
Use the eq selector to selct the nth row (0-based) and add your row after it using after , so: 使用eq选择器选择第n行(从0开始)并在使用after后添加你的行,所以:
$('#my_table > tbody:last tr:eq(2)').after(html);
where html is a tr
其中html是tr
$('#my_table tbody tr:nth-child(' + i + ')').after(html);
Adding on to Nick Craver's answer and also considering the point raised by rossisdead, if scenario exists like one has to append to an empty table, or before a certain row, I have done like this: 再加上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);
}
}
Hope it helps someone. 希望它可以帮助某人。
To add the right under a specific node(data-tt-id), this worked for me:要在特定节点(data-tt-id)下添加权限,这对我有用:
var someValue = "blah-id";
$("#tableID > tbody > tr[data-tt-id="' + someValue + '"]').after(row);
$($('#my_table > tbody:last')[index]).append(html);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.