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

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中。

8 个解决方案

#1

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

#2

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的索引。

#3

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

#4

Use the eq selector to selct the nth row (0-based) and add your row after it using after, so:

使用eq selector对第n行(基于0)进行选择，然后使用after添加您的行，则:

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

where html is a tr

html在哪里是tr

#5

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

#6

try this:

试试这个:

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

#7

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 tr which is clicked.
2. 获取当前正在单击的tr的引用。
3. Make a new tr DOM element.
4. 创建一个新的tr DOM元素。
5. Add it to the referred tr parent node.
6. 将其添加到所引用的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.

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

#8

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