Jquery вставить новую строку в таблицу в определенный индекс

Question

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

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

Как вставить строку (данное в переменной HTML) в определенный «индекс строки» i. Например, если i=3, строка будет вставлена ​​в четвертую строку в таблице.

Answer 1

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

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

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

Answer 2

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

Answer 3

Попробуйте это:

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.

Answer 4

Используйте eq selector для SELCT п-ю строку (от 0) и добавить строку после того, как с помощью after, так:

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

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

Answer 5

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

Answer 6

попробовать это:

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

Answer 7

Примечание:

$('#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 

Answer 8

Я знаю, что поздно приходит, но и для тех людей, которые хотят реализовать исключительно с помощью 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; 
    } 

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