Jquery fügt an einem bestimmten Index eine neue Zeile in die Tabelle ein

113

Ich kann eine neue Zeile mit jquery an eine Tabelle anhängen oder voranstellen:

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

So füge ich die Zeile (in der HTML-Variablen angegeben) in einen bestimmten "Zeilenindex" ein i. Wenn i=3zum Beispiel die Zeile als 4. Zeile in die Tabelle eingefügt wird.

aeq
quelle
nicht das gleiche, aber im Zusammenhang mit stackoverflow.com/questions/171027/add-table-row-in-jquery
Nathan Koop

Antworten:

157

Sie können Folgendes verwenden .eq()und .after()mögen:

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

Die Indizes basieren auf 0. Um also die 4. Zeile zu sein, müssen Sie i-1, da .eq(3)es sich um die 4. Zeile handelt, zur 3. Zeile ( 2) zurückkehren und diese einfügen .after().

Nick Craver
quelle
8
Es sollte beachtet werden, dass wenn jQuerys eq-Funktion einen negativen Wert erhält, sie bis zum Ende der Tabelle durchläuft.
Wenn Sie dies ausführen
2
Und fügen .before(html)Sie hinzu, wenn Sie es vor diesem Index einfügen möchten
Abhi
1
Wenn dies in der Tabelle keine Zeilen enthält, schlägt dies fehl. Hat jemand eine Lösung (indexbasiert), die auch für die erste Zeile funktioniert?
MartinM
@MartinM Wenn Sie einfügen, auch wenn keine Zeilen vorhanden sind , ist dies ein völlig anderes Szenario (bei dem der Index keine Rolle spielt?). Möchten Sie an das Ende anhängen, egal was passiert?
Nick Craver
@ NickCraver, nein, ich suche nur nach einer allgemeinen indexbasierten Lösung (wie dieser), aber meine Tabelle ist am Anfang leer. Ich kann natürlich überprüfen, ob die Tabelle leer ist, die erste Zeile einfügen und dann fortfahren Ihre Methode, aber das scheint mir nicht ellegant ..
MartinM
17

Versuche dies:

var i = 3;

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

oder dieses:

var i = 3;

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

oder dieses:

var i = 4;

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

All dies platziert die Reihe an derselben Position. nth-childverwendet einen 1-basierten Index.

user113716
quelle
4

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
Nilesh R. Makwana
quelle
4

Ich weiß, dass es spät ist, aber für diejenigen, die es nur mit dem implementieren möchten, JavaScriptkönnen Sie Folgendes tun:

  1. Holen Sie sich den Verweis auf den aktuellen, auf trden geklickt wird.
  2. Erstellen Sie ein neues trDOM-Element.
  3. Fügen Sie es dem trübergeordneten übergeordneten Knoten 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;
    }

Dadurch wird die neue Tabellenzeile genau unter der Zeile hinzugefügt, auf die die Schaltfläche geklickt wird.

Prateek
quelle
2

Versuche dies:

$("table#myTable tr").last().after(data);
Agus Puryanto
quelle
1

Verwenden Sie den eq-Selektor , um die n-te Zeile (0-basiert) auszuwählen und fügen Sie Ihre Zeile danach hinzu, indem Sie after verwenden , also:

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

wo HTML ist ein tr

Adam
quelle
1
$('#my_table tbody tr:nth-child(' + i + ')').after(html);
Arjan
quelle
0

Ich habe die Antwort von Nick Craver ergänzt und auch den von Rossisdead angesprochenen Punkt berücksichtigt: Wenn ein Szenario existiert, wie man es an eine leere Tabelle anhängen muss, oder vor einer bestimmten Zeile, habe ich Folgendes getan:

var arr = []; //array
if (your condition) {
  arr.push(row.id); //push row's id for eg: to the array
  idx = arr.sort().indexOf(row.id);

  if (idx === 0) {   
    if (arr.length === 1) {  //if array size is only 1 (currently pushed item)
        $("#tableID").append(row);
    }
    else {       //if array size more than 1, but index still 0, meaning inserted row must be the first row
       $("#tableID tr").eq(idx + 1).before(row);
    }   
  }          
  else {     //if index is greater than 0, meaning inserted row to be after specified index row
      $("#tableID tr").eq(idx).after(row);
  }    
}

Hoffe es hilft jemandem.

Jaggan_j
quelle
-1
$($('#my_table > tbody:last')[index]).append(html);
Eli Gray
quelle
4
Dies würde immer zu einer Ausnahme außerhalb des Bereichs führen.
Nick Craver