web-dev-qa-db-ja.com

jqueryは特定のインデックスでテーブルに新しい行を挿入します

私はjqueryを使用してテーブルに新しい行を追加または追加する方法を知っています：

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

行（html変数で指定）を特定の「行インデックス」iに挿入する方法。たとえば、i=3の場合、行はテーブルの4番目の行として挿入されます。

javascriptjqueryhtml-table
108
aeq

.eq() と .after() は次のように使用できます。

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

インデックスは0ベースなので、4番目の行になるにはi-1が必要です。.eq(3)が4番目の行になるため、3番目の行（2）に戻って .after() それ。

149
Nick Craver

これを試して：

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ベースのインデックスを使用します。

15
user113716

注意：

$('#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
3
Nilesh R. Makwana

私はそれが遅れていることを知っていますが、純粋に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;
    }

これにより、ボタンがクリックされた行のすぐ下に新しいテーブル行が追加されます。

1
Prateek

これを試して：

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

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

それが誰かを助けることを願っています。

0
Jaggan_j

eq selector を使用してn番目の行（0ベース）を選択し、 after を使用して行の後に追加します。

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

ここで、htmlはtrです

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