Jquery wstawić nowy wiersz do tabeli w określonym indeksie

Question

wiem, jak dołączyć lub poprzedzić nowy wiersz do tabeli przy użyciu jQuery:

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

Jak wstawić wiersz (podane w zmiennej html) do określony "indeks wierszy" i. Jeśli na przykład i=3, wiersz zostanie wstawiony jako 4. wiersz w tabeli.

Answer 1

Można użyć .eq() i .after() takiego:

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

Indeksy są 0, tak więc być 4. wiersz, trzeba i-1, ponieważ .eq(3) byłoby 4th wiersz, trzeba wrócić do trzeciego wiersza (2) i wstaw tę .after().

Answer 2

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

Answer 3

Spróbuj tego:

var i = 3; 

$('#my_table > tbody > tr:eq(' + i + ')').after(html); 

lub to:

var i = 3; 

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

lub to:

var i = 4; 

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

Wszystko to będzie umieścić wiersz w tej samej pozycji. nth-child używa indeksu opartego na 1.

Answer 4

Użyj eq selector do selct n-ty wiersz (0-based) i dodać wiersz po użyciu after, więc:

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

gdzie HTML jest tr

Answer 5

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

Answer 6

spróbuj tego:

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

Answer 7

Uwaga:

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

wiem, że to zbyt późno, ale dla tych ludzi, którzy chcą wdrożyć go wyłącznie za pomocą JavaScript, oto jak można to zrobić:

1. Get odniesienia do aktualnej tr który kliknął.
2. Utwórz nowy element DOM tr.
3. Dodaj go do określonego węzła nadrzędnego 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> 

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

Spowoduje to dodanie nowej tabeli wiersz dokładnie poniżej wiersza, w którym kliknięciu przycisku.