Jquery chèn dòng mới vào bảng tại một chỉ số nhất định

Question

Tôi biết làm thế nào để thêm hoặc thêm vào trước một hàng mới vào một bảng sử dụng jquery:

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

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

Answer 1

Bạn có thể sử dụng .eq() và .after() như thế này:

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

Các chỉ số là 0 dựa, do đó là hàng thứ 4, bạn cần i-1, vì .eq(3) sẽ là hàng thứ 4, bạn cần phải quay trở lại đến hàng thứ 3 (2) và chèn .after().

Answer 2

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

Answer 3

Hãy thử điều này:

var i = 3; 

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

hay này:

var i = 3; 

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

hay này:

var i = 4; 

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

Tất cả những sẽ đặt hàng ở vị trí tương tự. nth-child sử dụng chỉ mục dựa trên 1.

Answer 4

Sử dụng eq selector để selct hàng thứ n (dựa trên 0) và thêm hàng của bạn sau khi sử dụng after, vì vậy:

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

nơi html là một tr

Answer 5

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

Answer 6

thử điều này:

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

Answer 7

Lưu ý:

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

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

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

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

này sẽ bổ sung thêm các dòng của bảng mới chính xác dưới dòng mà trên đó các nút được nhấp.