Jquery insertar nueva fila en la tabla en un determinado índice de

Question

sé cómo anexar o anteponer una nueva fila en una tabla usando jQuery:

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

Cómo puedo insertar la fila (dada en la variable html) en un "índice de fila" específico i. Entonces, si i=3, por ejemplo, la fila se insertará como la 4ª fila en la tabla.

Answer 1

Puede utilizar .eq() y .after() así:

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

Los índices son 0 sobre la base, por lo que es la cuarta fila, necesita i-1, ya .eq(3) sería la cuarta fila, es necesario volver a la 3ra fila (2) e inserte .after() eso.

Answer 2

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

Answer 3

Prueba esto:

var i = 3; 

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

o esto:

var i = 3; 

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

o esto:

var i = 4; 

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

Todos estos colocar la fila en la misma posición. nth-child usa un índice de 1 basado.

Answer 4

Uso del eq selector para seleccionar destino de la fila n (0-based) y añada su fila después de que el uso de after, por lo que:

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

en HTML es un tr

Answer 5

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

Answer 6

intente esto:

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

Answer 7

Nota:

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

Answer 8

Sé que es llegar tarde, pero para aquellas personas que quieren poner en práctica puramente mediante el JavaScript, aquí es cómo puede hacerlo:

1. obtener la referencia a la corriente tr que se ha hecho clic.
2. Crea un nuevo elemento DOM tr.
3. Agréguela al referido nodo padre 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> 

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

Esto añadirá la nueva fila de la tabla exactamente debajo de la fila en la que se hace clic en el botón.