Jquery 특정 인덱스의 테이블에 새 행 삽입

Jquery 특정 인덱스의 테이블에 새 행 삽입

jquery를 사용하여 새 행을 테이블에 추가하거나 추가하는 방법을 알고 있습니다.

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

특정 "행 인덱스"에 행(html 변수에 지정)을 삽입하는 방법i그래서 만약에i=3예를 들어, 행은 테이블의 4번째 행으로 삽입됩니다.

다음을 사용할 수 있습니다.

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

인덱스는 0을 기반으로 하므로 4번째 행이 되려면 다음과 같이 해야 합니다.i-1,부터.eq(3)4번째 줄이 될 것이고, 당신은 3번째 줄로 돌아가야 합니다.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 기반 인덱스를 사용합니다.

참고:

$('#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다음과 같은 방법이 있습니다.

1. 전류에 대한 참조를 가져옵니다.tr클릭합니다.
2. 새로 만들기trDOM 요소.
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;
    }

그러면 단추가 클릭되는 행 바로 아래에 새 테이블 행이 추가됩니다.

사용해 보십시오.

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

eq 선택기를 사용하여 n번째 행(0-based)을 선택하고 다음을 사용하여 행을 추가합니다.

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

여기서 html은tr

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

닉 크레이버의 대답에 덧붙여 로스가 제기한 요점을 고려하면 빈 테이블에 추가해야 하는 시나리오나 특정 행 앞에 추가해야 하는 시나리오가 존재한다면 저는 다음과 같이 했습니다.

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

누군가에게 도움이 되길 바랍니다.

특정 노드(data-tt-id) 아래에 권한을 추가하는 것은 저에게 효과가 있었습니다.

var someValue = "blah-id";

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

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

언급URL : https://stackoverflow.com/questions/3577860/jquery-insert-new-row-into-table-at-a-certain-index