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

Jquery insert new row into table at a certain index

提问by aeq

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. So if i=3, for instance, the row will be inserted as the 4th row in the table.

如何将行（在 html 变量中给出）插入特定的“行索引” i。因此，如果i=3，例如，该行将作为表中的第 4 行插入。

回答by Nick Craver

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()它。

回答by user113716

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-childuses a 1 based index.

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

回答by Nilesh R. Makwana

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

回答by Prateek

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，您可以这样做：

1. Get the reference to the current trwhich is clicked.
2. Make a new trDOM element.
3. Add it to the referred trparent node.

1. 获取对当前tr单击的引用。
2. 创建一个新的trDOM 元素。
3. 将其添加到引用的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.

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

回答by Agus Puryanto

try this:

尝试这个：

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

回答by Jaggan_j

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.

希望它可以帮助某人。

回答by Adam

Use the eq selectorto 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

回答by Arjan

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

回答by Eli Grey

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