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());
    });
});

Answer 2

首先，我建议您停止使用内联样式。相反，您可以向元素添加一个类，并将样式设置为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++;

<%}%>

如何在javascript中使用循环更改内部的innerhtml？

2 个答案: