JQuery вставляет новую строку в таблицу с определенным индексом

Я знаю, как добавить или добавить новую строку в таблицу с помощью jquery:

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

Как вставить строку (заданную в переменной html) в определенный "индекс строки" i. Так что, если i=3, например, строка будет вставлена как 4-я строка в таблице.

Ответ 1

Вы можете использовать .eq() и .after() вот так:

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

Индексы основаны на 0, поэтому для 4-й строки вам нужно i-1, так как .eq(3) будет четвертой строкой, вам нужно вернуться к третьей строке (2) и вставить .after(), который.

Ответ 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.

Ответ 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 
                                             //i.e. between thead and tbody
                                             //.before() will also work similar

Ответ 4

Используйте селектор эквалайзеров, чтобы выделить n-й ряд (на основе 0) и добавить строку после нее с помощью after, поэтому:

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

где html является tr

Ответ 5

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

Ответ 6

попробуйте следующее:

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

Ответ 7

Я знаю, что это происходит поздно, но для тех людей, которые хотят реализовать его, используя JavaScript, вот как это можно сделать:

Получить ссылку на текущий tr, который нажал.
Создайте новый элемент tr DOM.
Добавьте его к указанному родителю tr node.

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;
    }

Это добавит новую строку таблицы точно под строку, на которую нажата кнопка.

Ответ 8

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