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

Question

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.

Answer 1 · 2017-09-09T01:56:05Z

September 9, 2017 1:56am

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.

Answer 2 · 2017-09-06T04:18:31Z

September 6, 2017 4:18am

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.

Answer 3 · 2017-09-07T03:14:08Z

September 7, 2017 3:14am

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!

Welcome to the Treehouse Community

Looking to learn something new?

Nick Ruiz

Nick Ruiz

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

3 Answers

Steven Parker

Steven Parker

Steven Parker

Steven Parker

Nick Ruiz

Nick Ruiz