猿问

如何在JavaScript的HTML表格主体中插入行

我有一个带有页眉和页脚的HTML表：


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

我正在尝试添加tbody以下内容：


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

但该行已添加到该tfoot部分中。


我该如何插入tbody？


繁花不似锦
浏览 863回答 3
3回答

catspeake

如果您想在中添加行tbody，请获取对该行的引用并将其添加到其中。var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];// Insert a row in the table at the last rowvar newRow&nbsp; &nbsp;= tableRef.insertRow();// Insert a cell in the row at index 0var newCell&nbsp; = newRow.insertCell(0);// Append a text node to the cellvar newText&nbsp; = document.createTextNode('New row');newCell.appendChild(newText);工作演示在这里。另外，您可以在insertRow 此处查看文档。
0

12345678_0001

基本方法：这应该添加HTML格式的内容并显示新添加的行。var myHtmlContent = "<h3>hello</h3>"var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];var newRow = tableRef.insertRow(tableRef.rows.length);newRow.innerHTML = myHtmlContent;
0

宝慕林4294392

添加行：<html>&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; function addRow() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var table = document.getElementById('myTable');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //var row = document.getElementById("myTable");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var x = table.insertRow(0);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var e = table.rows.length-1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var l = table.rows[e].cells.length;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //x.innerHTML = "&nbsp;";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (var c=0, m=l; c < m; c++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; table.rows[0].insertCell(c);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; table.rows[0].cells[c].innerHTML = "&nbsp;&nbsp;";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; function addColumn() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var table = document.getElementById('myTable');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (var r = 0, n = table.rows.length; r < n; r++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; table.rows[r].insertCell(0);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; table.rows[r].cells[0].innerHTML = "&nbsp;&nbsp;";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; function deleteRow() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("myTable").deleteRow(0);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; function deleteColumn() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // var row = document.getElementById("myRow");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var table = document.getElementById('myTable');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (var r = 0, n = table.rows.length; r < n; r++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; table.rows[r].deleteCell(0); // var table handle&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </script>&nbsp; &nbsp; <body>&nbsp; &nbsp; &nbsp; &nbsp; <input type="button" value="row +" onClick="addRow()" border=0 style='cursor:hand'>&nbsp; &nbsp; &nbsp; &nbsp; <input type="button" value="row -" onClick='deleteRow()' border=0 style='cursor:hand'>&nbsp; &nbsp; &nbsp; &nbsp; <input type="button" value="column +" onClick="addColumn()" border=0 style='cursor:hand'>&nbsp; &nbsp; &nbsp; &nbsp; <input type="button" value="column -" onClick='deleteColumn()' border=0 style='cursor:hand'>&nbsp; &nbsp; &nbsp; &nbsp; <table&nbsp; id='myTable' border=1 cellpadding=0 cellspacing=0>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr id='myRow'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; </table>&nbsp; &nbsp; </body></html>
0
随时随地看视频慕课网APP

相关问题

为什么字体颜色在Eclipse上没有变化 2 回答

相关分类

JavaScript
Html/CSS
为什么字体颜色在Eclipse上没有变化 2 回答
我要回答