jQuery 在指定位置插入新行到表格中

Question

我知道如何使用jQuery在表格中追加或插入新行：

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

如何将给定的HTML变量中的行插入到特定的“行索引”i中。例如，如果i=3，则该行将作为表中的第4行插入。

- aeq

---

不是相同的，但与https://dev59.com/P3VC5IYBdhLWcg3w1E1q相关。 - Nathan Koop

Answer 1

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

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

索引是从0开始计算的，所以要表示第4行需要使用i-1。因为.eq(3)会选中第4行，你需要回到第三行（2）并插入.after()。

- Nick Craver

---

请注意，如果将jQuery的eq函数赋予负值，它会循环到表格的末尾。因此，运行此代码并尝试将其插入在0索引处将导致新行插入到末尾。 - rossisdead

如果您想在该索引之前插入它，请添加 .before(html)。 - Abhinav

如果表中没有行，则此方法会失败，有没有人有一个解决方案（基于索引），即使对于第一行也可以工作？ - MartinM

@MartinM 如果您正在插入即使没有行，那么这是完全不同的情况（索引无关紧要？）- 无论如何，您想要追加到末尾吗？ - Nick Craver

@NickCraver 当然，我只是好奇，是否有一种不需要if/else的优雅方式，谢谢。 - MartinM

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的索引。

- user113716

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

- Nilesh R. Makwana

Answer 4

我知道有些晚了，但对于那些想纯粹使用 JavaScript 实现的人，以下是实现方法：

1. 获取被点击的当前 tr 的引用。
2. 创建一个新的 tr DOM 元素。
3. 将其添加到所引用的 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;
    }

这将在按钮所在的行下方添加新的表格行。

- Prateek

Answer 5

试试这个：

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

- Agus Puryanto

Answer 6

使用 eq选择器 选择第n行（从0开始），然后使用after将您的行添加在其后面，因此：

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

其中html是一个tr

- Adam

Answer 7

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

- Arjan

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

希望能对某些人有所帮助。

- Jaggan_j

Answer 9

要在特定节点(data-tt-id)下添加右侧内容，以下方法适用于我：

var someValue = "blah-id";

$("#tableID > tbody > tr[data-tt-id="' + someValue + '"]').after(row);

- z atef

Answer 10

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

- Eli Grey

---

这将始终导致索引超出范围异常。 - Nick Craver