0

私はこの行を持つテーブルを持っています: (私はテーブルにこれを6つ持っています)

<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 つのボックスしかない場合、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を使用する場合は、次のようにすることができます。

Jクエリ:

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