javascript - 如何使用 javascript 中的循环更改 内 的内部html？

Question

我有一个包含这一行的表格:(我的表格中有六个这样的行)

<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>

我想创建一个循环，根据列表的大小为每个 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++;

<%}%>

Answer 1

这应该符合您的要求。有关演示，请参阅此 Fiddle .

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:

var items = document.getElementsByTagName('td');

for (var i = 0; i <= items.length; i++) {
    items[i].innerHTML = items[i].style.height;
}

如果您使用jQuery你可以这样做:

Jquery:

$(document).ready(function () {
    $.each($('td'), function () {
        $(this).html($(this).height());
    });
});