Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Nick Ruiz
Nick Ruiz
18,492 Points

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..

HTML

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

        <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">

            </div>
        </div>

        <!-- 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>
    </body> 

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;
     }else{
          console.log("too full");
      }
    }//end if
   }//end inner for     
}//end for
count++;

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
216,108 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.

Nick Ruiz
Nick Ruiz
18,492 Points

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!

Steven Parker
Steven Parker
216,108 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.