Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


iterating through an html table with a double for loop in js?

Hey guys, I have an html table with 3 rows and 24 columns and I am trying to store an integer value in each cell one at a time. When a user clicks a button it increments that value up to 2 and if the value is 2 it goes to the next cell and stores a 1 and then a 2.. then goes to the next cell and stores a 1 and then a 2 and so on.. My problem is I cannot seem to figure out how to target the ith and jth cell and assign it a value using a double for loop in javascript. heres my code..


        <div align="center">
            <h1>Repair Check-in</h1>

        <div align="center">
            <p id="main"> </p> </br>
            <button type="button" onclick="checkinMod()" method="post">Check-in a new repair</button></br></br></br>

            <div align="center" id="table">


        <!-- import jQuery -->
        <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/modApp.js" type="text/javascript" charset="utf-8"></script>

Javascript Function

for(var i = 1; i <= cols.length; i++){
  for(var j = 1; j <= rows.length; j++){
     if(count <= 2){
       document.getElementsByTagName("tr")[i].innerHTML,document.getElementsByTagName("td")[j].innerHTML = count;
          console.log("too full");
    }//end if
   }//end inner for     
}//end for

I don't think the long line in the document.getElementsByTagName is correct syntax, I just don't know how to target the specific cell as mentioned in the question. Thanks for any help.

3 Answers

Steven Parker
Steven Parker
228,026 Points

I'm not sure what you mean by "only updating a certain number of cells", but when I tried it, on every click it either sets the number 1 in the next free cell, or increments that number if it is less than 3. I kept clicking and it did this across the entire line. Isn't that what you want to do?

Now if you intended for "MAX" to represent the largest allowed value, you need to test it with "count <= MAX" instead of "count < MAX" on line 142. And line 111 is missing the "+" symbol at the end. And in the HTML file the footer element should be inside the body. On my browser these didn't affect the functionality, but perhaps on yours they may be causing different behavior.

Steven Parker
Steven Parker
228,026 Points

You were close, but you have something strange with the row element property and the comma. I think you want this:

      document.getElementsByTagName("tr")[i].getElementsByTagName("td")[j].innerHTML = count;

But you'll need more code than you show here to try it. The HTML shown here has no table in it, and the JS doesn't show how the values of "row" and "col" are established.

Sorry I didn't want to post a long snippet of code. I tried what you said but am getting weird result and it's only updating a certain number of cells. I hate to make you click another link but here is a link to the repo if you want to look at the full code and run it in a browser. It could be the way I'm approaching the html table too so maybe you can check how I am implementing the table in case that is part of the problem. If you have a better way in approaching this let me know!

https://github.com/tefnick/RepairSchedule Note: I hard coded a couple cell values to illustrate what I am going for in this project.

Thanks again for taking time to help me hack this out!