Html 使用 .appendChild 将 <TR> 添加到 <TABLE>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16269652/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding <TR> to a <TABLE> with .appendChild
提问by ambonjingness
Everytime I try to enter a new cell to the table it doesn't add the text in the bowlersNamevalue. Is there something wrong with my Javascript code? It says "undefined".
每次我尝试在表格中输入一个新单元格时，它都不会在BowlersName值中添加文本。我的 Javascript 代码有问题吗？它说“未定义”。
<script type="text/javascript">
/* <![CDATA[ */
function addBowler() {
var newBowler = document.getElementsByName('bowlersName').value;
var tr = document.createElement('tr');
var td = tr.appendChild(document.createElement('td'));
td.innerHTML = newBowler;
document.getElementById("bowlerList").appendChild(tr);
}
/* ]]> */
</script>
</head>
<body>
<!-- HEADER 1 & 2 -->
<h1>Central Valley Lanes</h1>
<h2>2008 Bowling Teams</h2>
Bowler's name <input type="text" name="bowlersName" size="15" /><input type="button" value="Add Bowler" onclick="addBowler()" />
<h2>Team Roster</h2>
<form action="FormProcessor.html" method="get">
<table border="1" id="bowlerList">
<tr>
<td id="empty">Your team roster is empty</td>
</tr>
</table>
<br />
<input type="button" value="Submit Roster" />
</form>
</body>
回答by Hugo Marisco
Try to change this line:
尝试更改此行：
td.innerHTML = (" + bowlersName + ");
To this:
对此：
td.innerHTML = "(" + bowlersName + ")";
回答by Arun P Johny
There are two problems
有两个问题
- There is no variable named
bowlersName, it should benewBowler - Your string concatenation is wrong,
(" + bowlersName + ")should benewBowler
- 没有变量命名
bowlersName，应该是newBowler - 你的字符串连接是错误的，
(" + bowlersName + ")应该是newBowler
Demo: Fiddle
演示：小提琴
function addBowler() {
var table = document.getElementById("bowlerList");
var emptyRow = document.getElementById("empty");
if(emptyRow){
emptyRow.parentNode.removeChild(emptyRow)
}
var newBowler = document.getElementsByName('bowlersName')[0].value;
var tr = document.createElement('tr');
var td = tr.appendChild(document.createElement('td'));
td.innerHTML = newBowler;
table.appendChild(tr);
}
回答by ttfreeman
<table class="table table-striped" id="dashTable">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody id="task-row">
</tbody>
</table>
Now you can insert your rows using literal strings:
现在您可以使用文字字符串插入行：
data.forEach((element, i) => {
console.log(element, i)
var t = document.getElementById("dashTable");
var r = document.createElement("TR");
r.innerHTML = `
<tr>
<th scope="row">${i + 1}</th>
<td>${element.text}</td>
<td>${element.createdAt}</td>
<td>${element.completed}</td>
</tr>
`
t.tBodies[0].appendChild(r)
