Question

137

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

rated 0 times [ 140] [ 3] / answers: 1 / hits: 39997 / 11 Years ago, thu, july 4, 2013, 12:00:00

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



<%}%>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

hailie

Add To Favorites

Follow

Total Points: 25

Total Questions: 112

Total Answers: 111

Location: Belize

Member since Tue, Dec 8, 2020

4 Years ago

answered 11 Years ago lucianod · Accepted Answer

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

    });

});