Wie fügt man Zeile in HTML-Tabellenkörper in Javascript ein?


Answers

Sie können das folgende Snippet mit Jquery versuchen.

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

Ich habe eine HTML-Tabelle mit einer Kopfzeile und einer Fußzeile:

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

Ich versuche, eine Zeile in tbody mit dem folgenden hinzuzufügen:

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

Die Zeile wird jedoch im Abschnitt tfoot hinzugefügt.

Wie man es tbody ?




Ich denke, dieses Skript ist genau das, was du brauchst

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



Ich denke, dies ist der beste Weg, eine Zeile in die Tabelle einzufügen:

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



Zeilen hinzufügen

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

und Zellen






Related