tablas - ¿Cómo insertar una fila en el cuerpo de la tabla HTML en Javascript?

recorrer tabla javascript

Question

Tengo una tabla HTML con un encabezado y un pie de página:

<table id="myTable">
    <thead>
        <tr>
            <th>My Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>aaaaa</td> 
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>My footer</td>
        </tr>
    <tfoot>
</table>

Estoy tratando de agregar una fila en tbody con lo siguiente:

myTable.insertRow(myTable.rows.length - 1);

pero la fila se agrega en la sección de tfoot .

¿Cómo insertarlo tbody ?

Answer 1

Creo que esta es la mejor manera de agregar una fila a la mesa:

function myFunction() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(0);
}

Answer 2

Creo que este script es exactamente lo que necesitas

var t = document.getElementById(''myTable'');
var r =document.createElement(''TR'');
t.tBodies[0].appendChild(r)

Answer 3

Enfoque básico:

Esto debería agregar contenido formateado en html y mostrar la fila recién agregada.

var myHtmlContent = "<h3>hello</h3>"
var tableRef = document.getElementById(''myTable'').getElementsByTagName(''tbody'')[0];

var newRow   = tableRef.insertRow(tableRef.rows.length);
newRow.innerHTML = myHtmlContent;

Answer 4

Estás cerca, solo agrega la fila al tbody lugar de a la table :

myTbody.insertRow();

Solo tBody una referencia a tBody ( myTbody ) antes de usar. Tenga en cuenta que no necesita pasar la última posición en una tabla, se coloca automáticamente al final cuando se omite el argumento.

Una demostración en vivo en jsFiddle .

Answer 5

He intentado esto,

Esto es trabajo para mí

var table=document.getElementById("myTable");
var row=table.insertRow(myTable.rows.length-2);
var cell1=row.insertCell(0);

Answer 6

Puede probar el siguiente fragmento con Jquery .

$(table).find(''tbody'').append( "<tr><td>aaaa</td></tr>" );

Answer 7

Puedes usar el siguiente ejemplo

<table id="purches">
    <thead>
        <tr>
            <th>ID</th>
            <th>Transaction Date</th>
            <th>Category</th>
            <th>Transaction Amount</th>
            <th>Offer</th>

        </tr>
        </thead>
        <!--  <tr th:each="person : ${list}"    >
            <td><li th:each="person : ${list}" th:text="|${person.description}|"></li></td>
            <td><li th:each="person : ${list}" th:text="|${person.price}|"></li></td>
            <td><li th:each="person : ${list}" th:text="|${person.available}|"></li></td>
            <td><li th:each="person : ${list}" th:text="|${person.from}|"></li></td>
            </tr>  -->
        <tbody id="feedback">
        </tbody>        

    </table>

Archivo JS:

    $.ajax({
    type: "POST",
    contentType: "application/json",
    url: "/search",
    data: JSON.stringify(search),
    dataType: ''json'',
    cache: false,
    timeout: 600000,
    success: function (data) {

     //  var json = "<h4>Ajax Response</h4><pre>"  + JSON.stringify(data, null, 4) + "</pre>";
       // $(''#feedback'').html(json);
        //
       console.log("SUCCESS : ", data);
       //$("#btn-search").prop("disabled", false);

        for (var i = 0; i < data.length; i++) {  
        //  $("#feedback").append(''<tr><td>'' + data[i].accountNumber + ''</td><td>'' + data[i].category + ''</td><td>'' + data[i].ssn +''</td></tr>'');
            $(''#feedback'').append(''<tr><td>'' + data[i].accountNumber + ''</td><td>'' + data[i].category + ''</td><td>'' + data[i].ssn +''</td><td>'' + data[i].ssn +''</td><td>'' + data[i].ssn +''</td></tr>'');

             alert(data[i].accountNumber)


        }

    },
    error: function (e) {

        var json = "<h4>Ajax Response</h4><pre>" + e.responseText + "</pre>";
        $(''#feedback'').html(json);

        console.log("ERROR : ", e);
        $("#btn-search").prop("disabled", false);

    }
});

Answer 8

Si desea agregar una fila en el tbody , obtenga una referencia y agréguela allí.

var tableRef = document.getElementById(''myTable'').getElementsByTagName(''tbody'')[0];

// Insert a row in the table at the last row
var newRow   = tableRef.insertRow(tableRef.rows.length);

// Insert a cell in the row at index 0
var newCell  = newRow.insertCell(0);

// Append a text node to the cell
var newText  = document.createTextNode(''New row'');
newCell.appendChild(newText);

Una demostración en funcionamiento here . También puede consultar la documentación de insertRow here .

Answer 9

agregar filas

<html>
<script>


    function addRow(){
 var table = document.getElementById(''myTable'');
//var row = document.getElementById("myTable");
var x = table.insertRow(0);
var e =table.rows.length-1;
var l =table.rows[e].cells.length;
//x.innerHTML = "&nbsp;";
 for (var c =0,  m=l; c < m; c++) {
table.rows[0].insertCell(c);
   table.rows[0].cells[c].innerHTML  = "&nbsp;&nbsp;";
}

}




function addColumn(){
       var table = document.getElementById(''myTable'');
        for (var r = 0, n = table.rows.length; r < n; r++) {
                table.rows[r].insertCell(0);
                table.rows[r].cells[0].innerHTML =  "&nbsp;&nbsp;" ;

        }

    }

function deleteRow() {
    document.getElementById("myTable").deleteRow(0);

}

function deleteColumn() {
   // var row = document.getElementById("myRow");
 var table = document.getElementById(''myTable'');
 for (var r = 0, n = table.rows.length; r < n; r++) {
    table.rows[r].deleteCell(0);//var table handle 
}
}

</script>
<body>
<input type="button" value="row +" onClick="addRow()" border=0       style=''cursor:hand''>
    <input type="button" value="row -" onClick=''deleteRow()'' border=0 style=''cursor:hand''>
    <input type="button" value="column +" onClick="addColumn()" border=0 style=''cursor:hand''>
    <input type="button" value="column -" onClick=''deleteColumn()'' border=0 style=''cursor:hand''>

    <table  id=''myTable'' border=1 cellpadding=0 cellspacing=0>
 <tr id=''myRow''>          
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
<tr>          
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>

    </table>



</body>
</html>

y celdas