html - How to change the innerhtml of <td> inside a <tr> using a loop in javascript? - Stack Overflo

admin管理员组

文章数量:1305032

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.

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

<%}%>

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.

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

<%}%>

• javascript
• html
• jsp
• innerhtml

Share Improve this question Follow edited Jul 4, 2013 at 9:58 pmark019 asked Jul 4, 2013 at 9:40 pmark019pmark019 1,20955 gold badges1616 silver badges2424 bronze badges 1

• 2 I think you need to edit your question. Its too confusing... The HTML and the Javascript seem unconnected. – user1737842 Commented Jul 4, 2013 at 9:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

This should fit your requirements. For demonstration see this 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;
}

If you would use jQuery you could do it like this:

Jquery:

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

First of all i reend 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.

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

<%}%>

本文标签： htmlHow to change the innerhtml of lttdgt inside a lttrgt using a loop in javascriptStack Overflow