使用JavaScript向表添加新行
[英]Adding new row to table using javascript
问题描述
I have searched and found similar answers to this but not exactly and I can't figure out what I'm doing wrong... Thanks for any help you can provide! 
我已经搜索并找到了与此类似的答案，但不完全相同，我无法弄清自己在做什么错...感谢您提供的任何帮助！
<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
I suppose it would be more formally correct to use insertCell for each added cell, but just dropping in the whole string will work if you set newRow's innerHTML: 我想在每个添加的单元格上使用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
As per MDN , you need to add cells to the row after creating it. 根据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
Take a look at using this instead: 看一下使用它代替：
<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>
The .insertRow(-1) will append the new row to the end of the table, or use .insertRow(0) to prepend the new row to the table. .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;
}
Been a while since i did normal javascript. 自从我做了普通的javascript以来已经有一段时间了 But this should work. 但这应该可行。 Probably not the nicest way to do it. 可能不是最好的方法。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.