如何在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？
繁花不似锦浏览 862回答 3
3回答
-
catspeake
如果您想在中添加行tbody，请获取对该行的引用并将其添加到其中。var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];// Insert a row in the table at the last rowvar newRow = tableRef.insertRow();// Insert a cell in the row at index 0var newCell = newRow.insertCell(0);// Append a text node to the cellvar newText = document.createTextNode('New row');newCell.appendChild(newText);工作演示在这里。另外，您可以在insertRow 此处查看文档。 -
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; -
宝慕林4294392
添加行：<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 = " "; for (var c=0, m=l; c < m; c++) { table.rows[0].insertCell(c); table.rows[0].cells[c].innerHTML = " "; } } 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 = " "; } } 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> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </body></html>
随时随地看视频慕课网APP
JavaScript
Html/CSS