0

我有一张有这一行的桌子：（我的桌子上有六个）

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

<%}%>
4

2 回答 2

1

首先，我建议您停止使用内联样式。相反，您可以向元素添加一个类，并将样式设置为 CSS 文件中的类。

据我了解，您想在表格中显示包含数据的行：

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

<%}%>
于 2013-07-04T10:59:31.797 回答
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，你可以这样做：

查询：

$(document).ready(function () {
    $.each($('td'), function () {
        $(this).html($(this).height());
    });
});
于 2013-07-04T10:01:00.080 回答