Jquery chèn hàng mới vào bảng tại một chỉ mục nhất định

Tôi biết cách nối hoặc thêm một hàng mới vào bảng bằng cách sử dụng jquery:

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

Làm cách nào để chèn hàng (đã cho trong biến html) vào một "chỉ mục hàng" cụ thể i. Vì vậy, nếu i=3, ví dụ, hàng sẽ được chèn vào hàng thứ 4 trong bảng.

Bạn có thể sử dụng .eq()và .after()thích điều này:

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

Các chỉ mục dựa trên 0, vì vậy, để trở thành hàng thứ 4, bạn cần i-1, vì .eq(3)sẽ là hàng thứ 4, bạn cần quay lại hàng thứ 3 ( 2) và chèn .after()nó.

Thử cái này:

var i = 3;

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

hoặc cái này:

var i = 3;

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

hoặc cái này:

var i = 4;

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

Tất cả những thứ này sẽ đặt hàng ở cùng một vị trí. nth-childsử dụng chỉ mục dựa trên 1.

Ghi chú:

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

Tôi biết nó đến muộn nhưng đối với những người muốn triển khai nó hoàn toàn bằng cách sử dụng JavaScript, đây là cách bạn có thể làm điều đó:

1. Lấy tham chiếu đến hiện tại tr được nhấp vào.
2. Tạo một cái mới tr phần tử DOM .
3. Thêm nó vào trnút cha được giới thiệu .

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>

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

Thao tác này sẽ thêm hàng bảng mới chính xác bên dưới hàng mà nút được nhấp vào.

thử cái này:

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

Sử dụng công cụ chọn eq để chọn hàng thứ n (dựa trên 0) và thêm hàng của bạn vào sau hàng bằng cách sử dụng sau , vì vậy:

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

trong đó html là tr

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

Thêm vào câu trả lời của Nick Craver và cũng xem xét quan điểm do rossisdead nêu ra, nếu tồn tại tình huống như người ta phải thêm vào một bảng trống hoặc trước một hàng nhất định, tôi đã làm như sau:

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

Hy vọng nó sẽ giúp một ai đó.

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