for loop inconsistency in table rows

Question

//Iterate through stuff with for loop method
//http://stackoverflow.com/questions/3065342/how-do-i-iterate-through-table-rows-and-cells-in-javascript
var omitTD = $('.ColHead').closest('tr').find('td:eq(0), td:eq(1)'), headerTD = $('.ColHead').closest('tr').find('td').not(omitTD);
  ;
var table = document.getElementById("mytab1");
for (var i = 0, row; row = table.rows[i]; i++) {
  for (var j = 0, col; col = row.cells[j]; j++) {
    headerTD.eq(j).css("background-color", "#ACE");
  }
}
headerTD.text('Target This');
omitTD.text('Dont Target');

table {
  border-collapse: collapse;
}
td,
tr {
  border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table id="mytab1">
  <tbody>
    <tr>
      <td rowspan="2"></td>
      <td class="mrGridQuestionText" style=""></td>
      <td colspan="3" class="mrGridQuestionText" style="">
        <div class="ColHead"></div>
        <center>
          <span class="mrQuestionText" style=""><div class="ColHead"></div>Carrier
                                
                        <br>
            Selection/
                                
                            <br>
            Negotiation
                            
                            </span>
        </center>
      </td>
      <td colspan="3" class="mrGridQuestionText" style="">
        <center>
          <span class="mrQuestionText" style="">Order
                                
                                <br>
            Fulfillment
                            
                                </span>
        </center>
      </td>
      <td colspan="3" class="mrGridQuestionText" style="">
        <center>
          <span class="mrQuestionText" style="">Transportation
                                
                                    <br>
            Distribution
                            
                                    </span>
        </center>
      </td>
      <td colspan="3" class="mrGridQuestionText" style="">
        <center>
          <span class="mrQuestionText" style="">Inventory
                                
                                        <br>
            Management
                            
                                        </span>
        </center>
      </td>
      <td colspan="3" class="mrGridQuestionText" style="">
        <center>
          <span class="mrQuestionText" style="">Logistics
                                
                                            <br>
            Information
                                
                                                <br>
            Systems
                            
                                                </span>
        </center>
      </td>
    </tr>
    <tr>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">Have Used</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">A</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">B</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">C</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">A</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">B</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">C</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">A</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">B</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">C</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">A</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">B</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">C</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">A</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">B</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">C</span>
      </td>
    </tr>
    <tr>
      <td rowspan="2"></td>
      <td class="mrGridQuestionText" style=""></td>
      <td colspan="3" class="mrGridQuestionText" style="">
        <div class="ColHead"></div>
        <center>
          <span class="mrQuestionText" style=""><div class="ColHead"></div>Carrier
                                
                                                    <br>
            Selection/
                                
                                                        <br>
            Negotiation
                            
                                                        </span>
        </center>
      </td>
      <td colspan="3" class="mrGridQuestionText" style="">
        <center>
          <span class="mrQuestionText" style="">Order
                                
                                                            <br>
            Fulfillment
                            
                                                            </span>
        </center>
      </td>
      <td colspan="3" class="mrGridQuestionText" style="">
        <center>
          <span class="mrQuestionText" style="">Transportation
                                
                                                                <br>
            Distribution
                            
                                                                </span>
        </center>
      </td>
      <td colspan="3" class="mrGridQuestionText" style="">
        <center>
          <span class="mrQuestionText" style="">Inventory
                                
                                                                    <br>
            Management
                            
                                                                    </span>
        </center>
      </td>
      <td colspan="3" class="mrGridQuestionText" style="">
        <center>
          <span class="mrQuestionText" style="">Logistics
                                
                                                                        <br>
            Information
                                
                                                                            <br>
            Systems
                            
                                                                            </span>
        </center>
      </td>
    </tr>
    <tr>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">Have Used</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">A</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">B</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">C</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">A</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">B</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">C</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">A</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">B</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">C</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">A</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">B</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">C</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">A</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">B</span>
      </td>
      <td class="mrGridQuestionText" style="text-Align: Center;vertical-align: Bottom;width: 40px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;">C</span>
      </td>
    </tr>
  </tbody>
</table>

Why does the JavaScript code in the snippet work, but not the following:

//Iterate through stuff with for loop method
//http://stackoverflow.com/questions/3065342/how-do-i-iterate-through-table-rows-and-cells-in-javascript
var headerTD = $('.ColHead').closest('tr').find('td').not('td:eq(0), td:eq(1)'),
  omitTD = $('.ColHead').closest('tr').find('td:eq(0), td:eq(1)');
var table = document.getElementById("mytab1");
for (var i = 0, row; row = table.rows[i]; i++) {
  for (var j = 0, col; col = row.cells[j]; j++) {
    headerTD.eq(j).css("background-color", "#ACE");
  }
}
headerTD.text('Target This');
omitTD.text('Dont Target');

The goal is simply to apply some css to certain cells and exclude the first two, using a for loop. Please note that I am deliberately not using the .each() which is much shorter code but slightly slower performance wise.

each() will not be user slower, there's no reason to make code more complex than needed... just dupe the class style with `:nth-child` selectors and not use js at all... — dandavis, Jan 08 '16 at 21:36
Since your `headerTD` code has two fewer elements in it, but your column loop still starts at zero, that `.eq(j)` test will mess things up. Using `.eq(j-2)` might help. — Pointy, Jan 08 '16 at 21:38
or start at 2 instead of zero and skip the extra method calls... — dandavis, Jan 08 '16 at 21:39
your for loop have no breaks!! when supposed it must break? by an Exception? — jherax, Jan 08 '16 at 21:41
@dandavis starting at 2 produces the same error. Go on, test yourself in this sandbox... http://jsfiddle.net/dixalex/bbp8e0zx/2/ — Alexander Dixon, Jan 08 '16 at 21:41
`row = table.rows[i]` are you trying to write == in both conditions? — Sachin, Jan 08 '16 at 21:43
@Sachin I don't really know what that does. I got it from the link that is commented out in the script. My goal there was to force iterate through all rows, in case it was being skipped. For whatever reason, after the first row has been iterated, the exclusive parameter is dropped/ignored. I'm trying to solve and figure out why that is. I appreciate the insight thus far. — Alexander Dixon, Jan 08 '16 at 21:49
@jherax: the for loop will terminate when the middle segment is falsy, in this case, when there are no more cells =< to the index in the collection. — dandavis, Jan 08 '16 at 21:51
@AlexanderDixon: do you just want to hit all the header cells in the table, except ones that happen to be first or second in their row? — dandavis, Jan 08 '16 at 21:52
@dandavis Yes that is exactly it. And this is what is acheived in the snippet using the `not()` method. I want to know, for future reference, why the code above not **not** work, and then a best practice approach using loops only. The issue has nothing to do with CSS or nth-child selectors. I chose this basic CSS task so that I could later apply it to something more complex. — Alexander Dixon, Jan 08 '16 at 21:55
ok, is the green on http://jsfiddle.net/now2rj1u/ in the right place? if so, i can help you convert the css to a loop... — dandavis, Jan 08 '16 at 21:57
@Pointy your response was the closest to understanding the core issue, however your suggestion did not work. Any other ideas? — Alexander Dixon, Jan 08 '16 at 21:58
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/100193/discussion-between-alexander-dixon-and-dandavis). — Alexander Dixon, Jan 08 '16 at 21:59

score 0 · Answer 1 · answered Jan 08 '16 at 22:37

The code is not sooo clear to understand, but it appears that you want to set the background colour of the cells in the first table row, skipping the first two columns, yes?

If that's so, then you can just use CSS.

tr:first-of-type td:nth-child(n+3) {
  background-color: #ace;
}

If that first row is actually a heading row, then using a <thead> and <th> will make the CSS and the HTML a bit clearer:

<table>
  <thead>
    <tr>
      <th>foo</th>
      <th>bar</th>
      <th>baz</th>
    </tr>
  </thead>
  <tbody> ...etc </tbody>
</table>


th:nth-child(n+3) {
  background-color: #ace;
}

for loop inconsistency in table rows

1 Answers1