[英]How to insert a row in an HTML table body in JavaScript
我有一个 HTML 表，其中包含一个 header 和一个页脚：
<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中添加一行，请获取对它的引用并调用其insertRow方法。
var tbodyRef = document.getElementById('myTable').getElementsByTagName('tbody')[0]; // Insert a row at the end of table var newRow = tbodyRef.insertRow(); // Insert a cell at the end of the row var newCell = newRow.insertCell(); // Append a text node to the cell var newText = document.createTextNode('new row'); newCell.appendChild(newText);
<table id="myTable"> <thead> <tr> <th>My Header</th> </tr> </thead> <tbody> <tr> <td>initial row</td> </tr> </tbody> <tfoot> <tr> <td>My Footer</td> </tr> </tfoot> </table>
（JSFiddle 上的旧演示）
您可以使用jQuery尝试以下代码段：
$(table).find('tbody').append("<tr><td>aaaa</td></tr>");
基本方法：
这应该添加 HTML 格式的内容并显示新添加的行。
var myHtmlContent = "<h3>hello</h3>"
var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];
var newRow = tableRef.insertRow(tableRef.rows.length);
newRow.innerHTML = myHtmlContent;
你很近。 只需将行添加到tbody而不是table ：
myTbody.insertRow();
只需在使用前获取对tBody ( myTbody ) 的引用。 请注意，您不需要传递表格中的最后一个位置； 省略参数时，它会自动定位在末尾。
我认为这个脚本正是你需要的
var t = document.getElementById('myTable');
var r =document.createElement('TR');
t.tBodies[0].appendChild(r)
添加行：
<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>
还有细胞。
let myTable = document.getElementById('myTable').getElementsByTagName('tbody')[0]; let row = myTable.insertRow(); let cell1 = row.insertCell(0); let cell2 = row.insertCell(1); let cell3 = row.insertCell(2); cell1.innerHTML = 1; cell2.innerHTML = 'JAHID'; cell3.innerHTML = 23; row = myTable.insertRow(); cell1 = row.insertCell(0); cell2 = row.insertCell(1); cell3 = row.insertCell(2); cell1.innerHTML = 2; cell2.innerHTML = 'HOSSAIIN'; cell3.innerHTML = 50;
table { border-collapse: collapse; } td, th { border: 1px solid #000; padding: 10px; }
<table id="myTable"> <thead> <tr> <th>ID</th> <th>NAME</th> <th>AGE</th> </tr> </thead> <tbody></tbody> </table>
添加列，添加行，删除列，删除行。 最简单的方法
function addColumn(myTable) { var table = document.getElementById(myTable); var row = table.getElementsByTagName('tr'); for(i=0;i<row.length;i++){ row[i].innerHTML = row[i].innerHTML + '<td></td>'; } } function deleterow(tblId) { var table = document.getElementById(tblId); var row = table.getElementsByTagName('tr'); if(row.length!='1'){ row[row.length - 1].outerHTML=''; } } function deleteColumn(tblId) { var allRows = document.getElementById(tblId).rows; for (var i=0; i<allRows.length; i++) { if (allRows[i].cells.length > 1) { allRows[i].deleteCell(-1); } } } function myFunction(myTable) { var table = document.getElementById(myTable); var row = table.getElementsByTagName('tr'); var row = row[row.length-1].outerHTML; table.innerHTML = table.innerHTML + row; var row = table.getElementsByTagName('tr'); var row = row[row.length-1].getElementsByTagName('td'); for(i=0;i<row.length;i++){ row[i].innerHTML = ''; } } table, td { border: 1px solid black; border-collapse:collapse; } td { cursor:text; padding:10px; } td:empty:after{ content:"Type here..."; color:#cccccc; } <!DOCTYPE html> <html> <head> </head> <body> <form> <p> <input type="button" value="+Column" onclick="addColumn('tblSample')"> <input type="button" value="-Column" onclick="deleteColumn('tblSample')"> <input type="button" value="+Row" onclick="myFunction('tblSample')"> <input type="button" value="-Row" onclick="deleterow('tblSample')"> </p> <table id="tblSample" contenteditable><tr><td></td></tr></table> </form> </body> </html>您还可以使用querySelector选择 tbody，然后在其末尾插入新行。
使用append将 Node 或 DOMString 对象插入到新单元格中，然后将其插入到新行中。
var myTbody = document.querySelector("#myTable>tbody"); var newRow = myTbody.insertRow(); newRow.insertCell().append("New data");
<table id="myTable"> <thead> <tr> <th>My Header</th> </tr> </thead> <tbody> <tr> <td>Data</td> </tr> </tbody> <tfoot> <tr> <td>My footer</td> </tr> </tfoot> </table>
我已经尝试过了，这对我有用：
var table = document.getElementById("myTable");
var row = table.insertRow(myTable.rows.length-2);
var cell1 = row.insertCell(0);
您可以使用以下示例：
<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>
JavaScript 文件：
$.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);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Expense Tracker</title>
</head>
<body>
<h1>Expense Tracker</h1>
<div id="myDiv">
<label for="name">Name:</label>
<input
type="text"
name="myInput"
id="myInput"
placeholder="Name of expense"
size="50"
/><br /><br />
<label for="date">Date:</label>
<input type="date" id="myDate" name="myDate" />
<label for="amount">Amount:</label>
<input
type="text"
name="myAmount"
id="myAmount"
placeholder="Dollar amount ($)"
/><br /><br />
<span onclick="addRow()" class="addBtn">Add Expense</span>
</div>
<br />
<input type="button" value="Add Rows" onclick="addRows()" />
<!-- Optional position -->
<table id="myTable">
<tr>
<th>Name</th>
<th>Date</th>
<th>Amount</th>
<th>Delete</th>
</tr>
<tr>
<td>McDonald's</td>
<td>6/22/2017</td>
<td>$12.00</td>
<td>
<input type="button" value="Delete" onclick="deleteRow(this)" />
</td>
</tr>
</table>
<script>
function deleteRow(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("myTable").deleteRow(i);
}
function addRows() {
console.log("add rows");
document.getElementById("myTable").innerHTML += `<tr>
<td>McDonald's</td>
<td>6/22/2017</td>
<td>$12.00</td>
<td>
<input type="button" value="Delete" onclick="deleteRow(this)" />
</td>
</tr>`;
}
</script>
</body>
</html>
$("#myTable tbody").append(tablerow);
如何在javascript / node.js中的HTML tablesorter表主体中插入行？
[英]How to insert row in HTML tablesorter table body in javascript/node.js?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.