Jquery แทรกแถวใหม่ลงในตารางที่ดัชนีหนึ่ง ๆ

ฉันรู้วิธีต่อท้ายแถวใหม่ลงในตารางโดยใช้ jquery:

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

ฉันจะแทรกแถว (กำหนดในตัวแปร html) ลงใน "ดัชนีแถว" เฉพาะiได้อย่างไร i=3ตัวอย่างเช่นถ้าแถวนั้นจะถูกแทรกเป็นแถวที่ 4 ในตาราง

คุณสามารถใช้.eq()และ.after()ชอบสิ่งนี้:

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

ดัชนีจะขึ้นอยู่กับ 0 ดังนั้นเพื่อให้เป็นแถวที่ 4 คุณต้อง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-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. สร้าง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;
    }

สิ่งนี้จะเพิ่มแถวตารางใหม่ใต้แถวที่คลิกปุ่ม

ลองสิ่งนี้:

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

ใช้ตัวเลือก eqเพื่อเลือกแถวที่ n (อิงตาม 0) และเพิ่มแถวของคุณหลังจากนั้นโดยใช้หลังจากนั้น:

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