llenar - tablas en javascript ejemplos

Jquery inserta una nueva fila en la tabla en un cierto índice

Question

Sé cómo agregar o anteponer una nueva fila en una tabla usando jquery:

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

Cómo 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

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 2

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án la fila en la misma posición. nth-child usa un índice basado en 1.

Answer 3

Puede usar .eq() y .after() esta manera:

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

Los índices están basados ​​en 0, por lo que para ser la 4ª fila, necesita i-1 , ya que .eq(3) sería la 4ª fila, debe volver a la 3ª fila ( 2 ) e insertar .after() que .

Answer 4

Sé que llegará tarde, pero para las personas que quieran implementarlo usando el JavaScript , he aquí cómo hacerlo:

1. Obtenga la referencia al tr actual en el que se hace clic.
2. Crea un nuevo elemento DOM tr .
3. tr nodo padre tr referido.

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 agregará la nueva fila de la tabla exactamente debajo de la fila en la que se hace clic en el botón.

Answer 5

Use el selector de eq para seleccionar la enésima fila (basada en 0) y agregue su fila después de usarla .after() , entonces:

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

donde html es un tr

Answer 6

prueba esto:

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

Answer 7

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

Answer 8

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