jquery 특정 인덱스에서 테이블에 새 행 삽입

jquery 특정 인덱스에서 테이블에 새 행 삽입

---

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

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

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

---

당신은 이것을 사용 .eq()하고 .after()좋아할 수 있습니다 :

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

인덱스는 그래서 당신은 필요, 4 행으로, 기반 0입니다 i-1때문에, .eq(3)4 행을 것입니다, 당신은 3 행 (다시 갈 필요 2) 삽입 .after()이 있습니다.

---

이 시도:

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-child1 기반 인덱스를 사용합니다.

---

노트 :

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

---

이 시도:

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

---

늦었다는 것을 알고 있지만을 사용하여 순수하게 구현하려는 사람들을 위해 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>

자바 스크립트에서 :

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

버튼을 클릭 한 행 바로 아래에 새 테이블 행이 추가됩니다.

---

eq 선택기 를 사용하여 n 번째 행 (0부터 시작)을 가져오고 after를 사용한 후에 행을 추가하십시오 .

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

html은 tr

---

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

---

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

그것이 누군가를 돕기를 바랍니다.

---

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

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