关于javascript：Jquery在某个索引处将新行插入表中


Jquery insert new row into table at a certain index

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

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

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

相关讨论

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

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

索引是基于0的，所以要成为第4行，你需要i-1，因为.eq(3)将是第4行，你需要回到第3行(2)并插入.after()。

相关讨论

试试这个：

1
2
3
var i = 3;

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

或这个：

1
2
3
var i = 3;

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

或这个：

1
2
3
var i = 4;

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

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

注意：

1
2
3
4
5
$('#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

我知道它已经晚了但是对于那些想要纯粹使用JavaScript实现它的人来说，这是你如何做到的：

  • 获取对单击的当前tr的引用。
  • 创建一个新的tr DOM元素。
  • 将其添加到引用的tr父节点。

    • HTML：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    <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中：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    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;
        }

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

    试试这个：

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

    再加上Nick Craver的回答，并考虑了rossisdead提出的观点，如果场景存在，就像一个人必须附加到空表，或者在某一行之前，我这样做了：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    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);
      }    
    }

    希望它可以帮助某人。

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

    使用eq选择器选择第n行(从0开始)并在使用after后添加你的行，所以：

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

    其中html是tr

    1
    $($('#my_table > tbody:last')[index]).append(html);
    相关讨论