JQuery einfügen neue Zeilen in der Tabelle zu einem bestimmten Index

Question

Ich weiß, wie anhänge oder eine neue Zeile in eine Tabelle mit Jquery setzt:

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

Wie ich die Zeile einfügen (in dem HTML-Variable angegeben) in ein spezifischer "Zeilenindex" i. Wenn also zum Beispiel i=3 wird, wird die Zeile als vierte Zeile in die Tabelle eingefügt.

Answer 1

Sie können .eq() und .after() wie folgt verwenden:

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

Die Indizes sind 0 basiert, so dass die vierte Reihe zu sein, müssen Sie i-1, da .eq(3) die 4. Reihe sein würde, Sie müssen zurück gehen in die 3. Reihe (2) und einfügen .after() dass.

Answer 2

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

Answer 3

Versuchen Sie folgendes:

var i = 3; 

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

oder dies:

var i = 3; 

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

oder dies:

var i = 4; 

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

All dies wird die Zeile in der gleichen Position. nth-child verwendet einen 1-basierten Index.

Answer 4

Verwenden Sie die eq selector selct die n-te Zeile (0-basiert) und Ihre Zeile hinzufügen, nachdem es after verwenden, so:

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

wo html ein tr ist

Answer 5

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

Answer 6

dies versuchen:

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

Answer 7

Hinweis:

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

Ich weiß, es kommt spät, aber für diejenigen, die es rein mit der JavaScript implementieren möchten, hier ist, wie Sie es tun können:

1. den Verweis auf die aktuelle tr erhalten, die angeklickt wird.
2. Erstellen Sie ein neues tr DOM-Element.
3. Fügen Sie es dem angegebenen übergeordneten Knoten tr hinzu.

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:

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

Dies wird die neue Tabellenzeile genau unterhalb der Zeile hinzufügen, auf dem die Schaltfläche geklickt wird.