javascript 如何通过数组循环创建具有innerHTML值/文本节点的表格单元格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14061499/
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
How to create, table cell with innerHTML value / textnode via loop of array
提问by Gambrinus
I have tried to run a Javascript loop to create a table with values in it from an array: I appended the text-node and tried that the text node will be the array values, one per td for the length. This is my code so far, it will only create one cell with "undefined" value:
我试图运行一个 Javascript 循环来创建一个包含数组中值的表：我附加了文本节点并尝试将文本节点作为数组值，每个 td 一个长度。到目前为止，这是我的代码，它只会创建一个具有“未定义”值的单元格：
function addtd(){
var table1 = document.getElementsByTagName('table')[0];
var rowrow = document.createElement('tr');
var foods = new Array();
foods[0] = "milk" ;`enter code here`
foods[1] = "meat" ;
foods[2] = "fruit" ;
foods[3] = "fish" ;
foods[4] = "salad" ;
for ( var i=0;i<foods.length;i++)
var cell1 = document.createElement('td').innerHTML = 'foods[i]';
var text1 = document.createTextNode(foods[i]) ;
cell1.appendChild(text1);
rowrow.appendChild(cell1);
table1.appendChild(rowrow);
}
<div id="divfood"> </div>
<button onclick="addtd()">Click me</button>`enter code here`
<table border="2" id="tabletable" cellspacing="5" >
</table>
回答by cchamberlain
I would change this -
我会改变这个 -
var cell1 = document.createElement('td').innerHTML = 'foods[i]';
to
到
var cell1 = document.createElement('td');
cell1.innerHTML = 'foods[i]';
I wouldn't expect that the cell1 will get set correctly when you are chaining its innerHTML inline to cell1, but haven't tested it.
我不希望当您将其内嵌的内嵌 HTML 链接到 cell1 时，cell1 会正确设置，但尚未对其进行测试。
回答by Austin
Something like this will loop through your array and create a row of it, as that seems to be what you are trying to do.
像这样的东西会遍历你的数组并创建一行，因为这似乎是你想要做的。
var foods = ["milk", "eggs", "lettuce", "tomato"],
food,
row = document.createElement("tr");
while (food = foods.shift()) {
var el = document.createElement("td");
el.innerText = food;
row.appendChild( el );
}
document.getElementsByTagName("table")[0].appendChild(row);
回答by Dimochka
You have several errors in your code including missing braces around the forloop and weird looking 'enter code here'sentence on the 6th line. You also forgot to put your JavaScript code inside the <script>tag. Here is the working version of your code:
您的代码中有几个错误，包括for循环周围缺少大括号和'enter code here'第 6 行看起来很奇怪的句子。您还忘记将 JavaScript 代码放在<script>标签中。这是您的代码的工作版本：
<script>
function addtd(){
var table1 = document.getElementsByTagName('table')[0];
var rowrow = document.createElement('tr');
var foods = new Array();
foods[0] = "milk" ;
foods[1] = "meat" ;
foods[2] = "fruit" ;
foods[3] = "fish" ;
foods[4] = "salad" ;
for ( i=0; i <foods.length; i++) {
var cell1 = document.createElement('td');
var text1 = document.createTextNode(foods[i]);
cell1.appendChild(text1);
rowrow.appendChild(cell1);
}
table1.appendChild(rowrow);
}
</script>
<div id="divfood"> </div>
<button onclick="addtd()">Click me</button>
<table border="2" id="tabletable" cellspacing="5" >
</table> ?
Here is the jsFiddle demo.
这是jsFiddle 演示。
