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

【问题标题】：Jquery insert new row into table at a certain indexJquery在某个索引处将新行插入表中
【发布时间】：2011-04-04 10:04:54
【问题描述】：

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

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

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

【问题讨论】：

不一样，但与stackoverflow.com/questions/171027/add-table-row-in-jquery相关

标签： javascript jquery html-table

【解决方案1】：

要在特定节点（data-tt-id）下添加权限，这对我有用：

var someValue = "blah-id";

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

【讨论】：

【解决方案2】：

添加到 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);
  }    
}

希望它可以帮助某人。

【讨论】：

【解决方案3】：

我知道它来晚了，但对于那些想纯粹使用 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;
    }

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

【讨论】：

【解决方案4】：

注意：

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

【讨论】：

【解决方案5】：

试试这个：

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

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

试试这个：

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

【讨论】：

【解决方案8】：

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

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

其中 html 是 tr

【讨论】：

【解决方案9】：

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

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

索引是从0开始的，所以要成为第4行，你需要i-1，因为.eq(3)是第4行，你需要回到第3行（2）并插入@987654323 @那个。

【讨论】：

需要注意的是，如果 jQuery 的 eq 函数被赋予一个负值，它会循环到表格的末尾。所以运行这个并尝试将它插入到 0 索引将导致新行被插入到末尾
如果你想在那个索引之前添加.before(html)
这失败了，如果表中没有行，有没有人有一个解决方案（基于索引），它甚至适用于第一行？
@MartinM 如果您要插入 即使没有行，那么这是一个完全不同的场景（索引无关紧要？） - 你想无论如何都追加到末尾？
@NickCraver，不，我只是在寻找一个基于索引的通用解决方案（像这样），但我的表在开始时是空的..我当然可以检查表是否为空并插入第一行，然后继续使用您的方法，但这对我来说似乎并不优雅..

【解决方案10】：

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

【讨论】：

这总是会导致索引超出范围异常。