我有一个带有页眉和页脚的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？
如果要在tbody中添加一行，请获取对它的引用并将其添加到那里。
var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];
// Insert a row in the table at the last row
var newRow = tableRef.insertRow();
// 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);
您可以尝试使用Jquery关注代码段。
$(table).find('tbody').append( "<tr><td>aaaa</td></tr>" );
你很接近，只需将行添加到tbody而不是table：
myTbody.insertRow();
在使用之前，请参考tBody（myTbody）。请注意，您不需要传递表中的最后一个位置，当省略参数时它会自动定位在最后。
基本方法：
这应该添加html格式的内容并显示新添加的行。
var myHtmlContent = "<h3>hello</h3>"
var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];
var newRow = tableRef.insertRow(tableRef.rows.length);
newRow.innerHTML = myHtmlContent;
我认为这个脚本正是你需要的
var t = document.getElementById('myTable');
var r =document.createElement('TR');
t.tBodies[0].appendChild(r)
我试过这个，
这对我有用
var table=document.getElementById("myTable");
var row=table.insertRow(myTable.rows.length-2);
var cell1=row.insertCell(0);
添加行
<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>和细胞
您可以使用以下示例
<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>
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);
}
});
我认为这是向表中添加行的最佳方法：
function myFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(0);
}