Html 如何使用javascript中的循环更改<tr>内<td>的innerhtml？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17466957/
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 change the innerhtml of <td> inside a <tr> using a loop in javascript?
提问by pmark019
I have a table with this row: (I have six of this in my table)
我有一个包含这一行的表：（我的表中有六个）
<tr bgcolor="#FFFFFF" id="0">
<td style="height:20px;" align="left"></td>
<td style="height:20px;" align="left"></td>
<td style="height:20px;" align="left"></td>
<td style="height:20px;" align="left"></td>
</tr>
I want to make a loop that will add innerHTML for each td base on the size of the list. So if there are only two box inside the list, only 2 tr will have inner HTML.
我想创建一个循环，根据列表的大小为每个 td 添加innerHTML。因此，如果列表中只有两个框，则只有 2 tr 将具有内部 HTML。
var y = 0;
<%
ArrayList userBoxList = BoxList.getInstance().getUserBoxList();
for(int x=0; x < userBoxList.size(); x++)
{
UserBox box = (UserBox) userBoxList.get(x); %>
document.getElementById(x).onclick = changeColor;
document.getElementById(y).innerHTML = "<%=box.getInfo().getBoxNumber()%>";
document.getElementById(y).innerHTML = "<%=box.getInfo().getBoxName()%>";
document.getElementById(y).innerHTML = "<%=box.getInfo().getBoxOwner()%>";
document.getElementById(y).innerHTML = "<%=box.getInfo().getBoxSize()%>";
y++;
<%}%>
回答by Matthias Holdorf
This should fit your requirements. For demonstration see this Fiddle.
这应该符合您的要求。有关演示，请参阅此Fiddle。
HTML:
HTML：
<table id="0">
<tr>
<td style="height: 20px;">a</td>
<td style="height: 20px;">b</td>
<td style="height: 20px;">c</td>
<td style="height: 20px;">d</td>
</tr>
</table>
JavaScript:
JavaScript：
var items = document.getElementsByTagName('td');
for (var i = 0; i <= items.length; i++) {
items[i].innerHTML = items[i].style.height;
}
If you would use jQueryyou could do it like this:
如果你会使用jQuery，你可以这样做：
Jquery:
查询：
$(document).ready(function () {
$.each($('td'), function () {
$(this).html($(this).height());
});
});
回答by Kaizo
First of all i recomend you stop using inline styles. Instead you can add a class to the elements and set the styles to the class in a CSS file.
首先，我建议您停止使用内联样式。相反，您可以向元素添加一个类，并将样式设置为 CSS 文件中的类。
As far as I understand you want to show inside the table the rows with data:
据我了解，您想在表中显示包含数据的行：
var y = 0, row, cell, data, table = document.getElementById("myTable");
<%
ArrayList userBoxList = BoxList.getInstance().getUserBoxList();
for(int x=0; x < userBoxList.size(); x++)
{
UserBox box = (UserBox) userBoxList.get(x); %>
//Generate an array with all the data to display
data = ["<%=box.getInfo().getBoxNumber()%>","<%=box.getInfo().getBoxName()%>",
"<%=box.getInfo().getBoxOwner()%>","<%=box.getInfo().getBoxSize()%>"];
row = document.createElement('tr');
row.id = y;
row.className = "whiteBackground";
row.onclick = changeColor;
// Loop through the data and create a cell for each one
data.forEach(function (dataElement) {
cell = document.createElement('td');
cell.className = "row20px";
cell.innerHTML = dataElement;
row.appendChild(cell);
});
// Add the new row to the table
table.appendChild(row);
y++;
<%}%>
