Jquery belirli bir dizindeki tabloya yeni satır ekler

Jquery kullanarak bir tabloya yeni bir satırı nasıl ekleyeceğimi veya başına nasıl ekleneceğini biliyorum:

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

Satırı (html değişkeninde verilen) belirli bir "satır indeksine" nasıl ekleyebilirim i. Dolayısıyla i=3, örneğin, satır tabloya 4. satır olarak eklenecektir.

Bunu kullanabilir .eq()ve .after()beğenebilirsiniz:

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

Dizinler 0 tabanlıdır, bu nedenle 4. satır olmak için ihtiyacınız vardır i-1, çünkü .eq(3)4. satır olacağı için 3. satıra ( 2) geri dönmeniz ve onu eklemeniz gerekir .after().

Bunu dene:

var i = 3;

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

veya bu:

var i = 3;

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

veya bu:

var i = 4;

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

Bunların hepsi sırayı aynı konuma yerleştirecektir. nth-child1 tabanlı bir dizin kullanır.

Not:

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

Geç olduğunu biliyorum, ancak bunu yalnızca kullanarak uygulamak isteyenler için JavaScript, bunu şu şekilde yapabilirsiniz:

1. trTıklanan akımın referansını alın .
2. Yeni bir trDOM öğesi oluşturun.
3. Bunu belirtilen trüst düğüme ekleyin .

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'te:

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

Bu, yeni tablo satırını düğmenin tıklandığı satırın tam altına ekleyecektir.

bunu dene:

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

Kullanım denk seçici inci satır (0 bazlı) selct ve kullandıktan sonra satır eklemek için sonra yani:

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

html nerede tr

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

Nick Craver'ın cevabına ek olarak ve ayrıca rossisdead'in ortaya koyduğu noktayı da göz önünde bulundurarak, eğer bir senaryo boş bir masaya eklenmesi gerektiği gibi veya belirli bir satırdan önce mevcutsa, şunu yaptım:

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

Umarım birine yardımcı olur.

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