Question

我知道如何使用jquery在表中追加或添加新行：

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

如何将行（在html变量中给出）插入特定的“行索引”i。因此，如果i=3，则该行将作为表中的第4行插入。

Answer 1

您可以像这样使用.eq()和.after()：

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

索引是基于0的，因此要成为第4行，您需要i-1，因为.eq(3)将是第4行，您需要返回第3行（{{1} }）并插入.after()那个。

Answer 2

试试这个：

var i = 3;

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

或者这个：

var i = 3;

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

或者这个：

var i = 4;

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

所有这些都将行放在相同的位置。 nth-child使用基于1的索引。

Answer 3

注意：

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

试试这个：

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

Answer 5

我知道它来得太晚但是对于那些想要纯粹使用JavaScript来实现它的人来说，这里有你如何做到这一点：

获取对所点击的当前tr的引用。
制作一个新的tr DOM元素。
将其添加到引用的tr父节点。

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中：

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

这会将新表格行添加到单击按钮的行的正下方。

Answer 6

使用eq selector选择第n行（从0开始）并使用after在其后添加行，所以：

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

其中html是tr

Answer 7

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

Answer 8

添加到尼克·克雷弗（Nick Craver）的答案中，还要考虑rossisdead提出的观点，如果存在这种情况，例如必须将其追加到一个空表中，或者在某一行之前，我应该这样做：

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

希望它可以帮助某人。

Answer 9

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

Jquery在某个索引处将新行插入表中

9 个答案: