使用JavaScript向表添加新行
[英]Adding new row to table using javascript
问题描述
我已经搜索并找到了与此类似的答案，但不完全相同，我无法弄清自己在做什么错...感谢您提供的任何帮助！
<html><head>
<script>
function doTheInsert() {
var newRow=document.getElementById('myTable').insertRow();
newRow="<td>New row text</td><td>New row 2nd cell</td>";
}
</script></head>
<body>
<table id="myTable" border="1">
<tr>
<td>First row</td>
<td>First row 2nd cell</td>
</tr>
<tr>
<td>Second row</td>
<td>more stuff</td>
</tr>
</table>
<br>
<input type="button" onclick="doTheInsert()" value="Insert new row">
</body></html>
4 个解决方案
解决方案1
3 已采纳 2017-05-23 17:39:23
我想在每个添加的单元格上使用insertCell形式上更正确，但是如果您设置newRow的innerHTML，则只需放入整个字符串即可：
function doTheInsert() {
var newRow=document.getElementById('myTable').insertRow();
// newRow = "<td>New row text</td><td>New row 2nd cell</td>"; <-- won't work
newRow.innerHTML = "<td>New row text</td><td>New row 2nd cell</td>";
}
function doTheInsert() { var newRow=document.getElementById('myTable').insertRow(); newRow.innerHTML="<td>New row text</td><td>New row 2nd cell</td>"; }
<table id="myTable" border="1"> <tr> <td>First row</td> <td>First row 2nd cell</td> </tr> <tr> <td>Second row</td> <td>more stuff</td> </tr> </table> <input type="button" onclick="doTheInsert()" value="Insert new row">
解决方案2
1 2017-05-23 17:36:06
根据MDN ，您需要在创建行后将其添加到行中。
function doTheInsert() { var newRow=document.getElementById('myTable').insertRow(); // Insert a cell in the row at cell index 0 var cell1 = newRow.insertCell(0); // Append a text node to the cell var cell1Text = document.createTextNode('New row text') cell1.appendChild(cell1Text); // Insert a cell in the row at cell index 1 var cell2 = newRow.insertCell(1); // Append a text node to the cell var cell2Text = document.createTextNode('New row 2nd cell') cell2.appendChild(cell2Text); }
<table id="myTable" border="1"> <tr> <td>First row</td> <td>First row 2nd cell</td> </tr> <tr> <td>Second row</td> <td>more stuff</td> </tr> </table> <br> <input type="button" onclick="doTheInsert()" value="Insert new row">
解决方案3
0 2017-05-23 17:41:25
看一下使用它代替：
<html><head>
<script>
function doTheInsert() {
var table = document.getElementById('myTable');
var newRow = table.insertRow(-1);
var newCell1 = newRow.insertCell(0);
var newCell2 = newRow.insertCell(1);
newCell1.innerHTML = "New row text";
newCell2.innerHTML = "New row 2nd Cell";
//newRow="<td>New row text</td><td>New row 2nd cell</td>";
}
</script></head>
<body>
<table id="myTable" border="1">
<tr>
<td>First row</td>
<td>First row 2nd cell</td>
</tr>
<tr>
<td>Second row</td>
<td>more stuff</td>
</tr>
</table>
<br>
<input type="button" onclick="doTheInsert()" value="Insert new row">
</body></html>
.insertRow(-1)会将新行追加到表的末尾，或者使用.insertRow(0)将新行添加到表的前面。
解决方案4
-1 2017-05-23 17:35:06
function doTheInsert() {
newRow="<td>New row text</td><td>New row 2nd cell</td>";
document.getElementById('myTable').innerHTML += newRow;
}
自从我做了普通的javascript以来已经有一段时间了 但这应该可行。 可能不是最好的方法。
新增一个 <select>使用jQuery，JavaScript到表行
[英]Adding a new <select> to a table row using Jquery, JavaScript
使用javascript动态地在表格的最后一行中添加一行
[英]Dynamically adding a row in the table onblur the last row in the table using javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.