Styling some, but not all table cells

Question

var headerTD = $('.ColHead').closest('tr').find('td'),
  omitTD = $('.ColHead').closest('tr').find('td:eq(0), td:eq(1)');
//.each() method works
//--------------------------------------------------
headerTD.each(function() {
  $(this).not(omitTD).css("border", "solid 10px red");
});
//--------------------------------------------------
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>
  <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>

I've come to learn that the .each() method is slow than the for loop method. I've also learned how to properly use the for loop. As such, please help me refine the code that will have the for method mimic the .each() method. The issue specifically that I'm having is that I do not know how to iterate over "each" row in the for loop. All of the code works but I need to know the syntax for the parameter that will iterate over each row, specifically the header rows, in the same fashion that .each() does.

Additional Context: jsfiddle

    var headerTD = $('.ColHead').closest('tr').find('td'),
      omitTD = $('.ColHead').closest('tr').find('td:eq(0), td:eq(1)');
    //.each() method works
    //--------------------------------------------------
    headerTD.each(function() {
      $(this).not(omitTD).css("border", "solid 10px red");
    });
    //--------------------------------------------------
    for (var i = 0, len = headerTD.length; i < len; i++) {
      if (i > 1) {
        //headerTD.eq(i).css("background-color", "#CCC");
      }
    }

Why not just set var i=1 and start there instead of adding another condition into the code? — Gary Storey, Jan 8 '16 at 17:42
Feel free to edit and move the jsfiddle into a stack snippet (Ctrl+M), the code can be executable right here, on-site :-) ...also please clarify if the code works as intended, and note that code that doesn't work as intended is off-topic on this site. — Mathieu Guindon♦, Jan 8 '16 at 17:45
Also, this is a micro optimization. If .each works, I wouldn't really worry about it unless it is really impacting your performance for some reason. — Gary Storey, Jan 8 '16 at 17:49
@ Gary Storey Good advice on setting the i to skip over what I don't need initially. I understand that this is a micro optimization, but as I will be moving towards for loops and away from the .each() (for practicing sake) I would like to know how the syntax to iterate through each row in the table. — Alexander Dixon, Jan 8 '16 at 18:17

JoshBerke · Accepted Answer · 2016-01-08 18:29:39Z

What defines a header row here? Have you considered using TH instead of TR? Then you can easily pick the header rows out. But just iterating over the rows is simple. You know the syntax for the for loop so I'm not sure if my answer is what your looking for

//To iterate over the rows you can do this
var rows=$("tr");
for(var l=0;l<rows.length;l++)
{
$(rows).eq(l).css("border","solid 10px blue");

}

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

Hi Josh, the row headers would be the rows with "Carrier Selecetion" text. My goal is to only apply some css to the <td> of the row headers, but skip the first two tds. The .each() method example I have acheives this exactly, but I want to do know to do it within the for loop. It is a good start to know that I can just declare the table rows. What is the syntax to loop through them, for each? — Alexander Dixon, Jan 8 '16 at 18:36
@mdfst Your right my bad, spend most of my time on backend services forgetting the basics gahhh — JoshBerke, Jan 8 '16 at 19:10

Roamer-1888 · Accepted Answer · 2016-01-09 19:10:31Z

1

The expensive part of the opertion is finding the full set of qualifying TDs in the DOM, so you should avoid doing so more than once.

var tds = $('.ColHead').closest('tr').find('td');

Then find the required subsets of tds and manipulate them

var headerTD = tds.slice(0, 1).text('Target This').css("border", "solid 10px red");
var omitTD = tds.slice(2).text('Dont Target');

Or, if the assigned vars are not going to be used again, no assignments need be made, not even tds :

$('.ColHead').closest('tr').find('td')
    .slice(0, 1).text('Target This').css("border", "solid 10px red")
    .end() //pop the collection's internal stack to get back to the full set of TDs
    .slice(2).text('Dont Target');

To perform exactly the same manipulation on every member of a jQuery selection, jQuery will perform all looping internally. .each() is only necessary when each member of a collection needs to be manipulated in some specific, individual manner.

edited Jan 9 '16 at 19:10

answered Jan 9 '16 at 18:34

Roamer-1888

1,2896 silver badges9 bronze badges

\$\begingroup\$ Hi Roamer, this is an interesting approach in that it uses the .slice() method, but it does not answer nor address the overall goal. Pasting your code into a jsfiddle the issue is still present of not being able to iterate through each row, and ommit the first two TD cells. The cell method defines the objects in the collection of the array as a whole, whereas I want the loop to iterate through each row and a new counter. Please consider this fiddle: jsfiddle.net/now2rj1u/2 \$\endgroup\$ – Alexander Dixon Jan 11 '16 at 20:22
\$\begingroup\$ OK, I didn't get it quite right but I'm sure that the main feature of my suggestion is correct - namely that this is all about selection not iteration. If you can devise jQuery selector(s) to select the elements of interest, then the iteration will be looked after by whichever jQuery method(s) you wish to apply. \$\endgroup\$ – Roamer-1888 Jan 11 '16 at 23:44
1

\$\begingroup\$ Try $('.ColHead').closest('tr').find('td:gt(1)').css("border", "solid 10px red"); \$\endgroup\$ – Roamer-1888 Jan 12 '16 at 8:07
\$\begingroup\$ Hi Roamer-1888, with your guidance, I was able to finally get this resolved. The thing that made the .each() method work was the .not() parameter. Passing that into the for statement conditioned solved it. Cheers! jsfiddle.net/dixalex/bbp8e0zx/4 \$\endgroup\$ – Alexander Dixon Apr 22 '16 at 20:54

Add a comment |

200_success · Accepted Answer · 2016-02-12 02:39:09Z

It seems odd that you are using JavaScript or jQuery at all for styling, when an effect like this could be achieved using CSS alone.

The concession you would have to make is that you cannot do the equivalent of a $('.ColHead').closest('tr') selector in CSS. You could either mark the relevant rows explicitly with a class, or use an :nth-child(odd) selector.

Support for :nth-child() pretty good among modern browsers, though the usage notes suggest that :nth-of-type() might be a good idea to work around a bug in iOS 8 Safari.

tr:nth-of-type(odd) td:nth-of-type(n+3) {
  border: 10px solid red;
}

table {
  border-collapse: collapse;
}

td,
tr {
  border: none;
}

tr:nth-of-type(odd) td:nth-of-type(n+3) {
  background-color: gray;
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table>
  <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>

I will concede that pure CSS used to be my number one route to tackle any and all issues. Over time, I've let the ease of use of JavaScript take over even the simplest task under the guise of cross-browser compatibility. The question is not a CSS issue, but an iteration one. All answers here are correct but I'm looking for a specific method here. How do I iterate over the rows, all of them, using the for loop. — Alexander Dixon, Feb 16 '16 at 2:19

Stack Exchange Network

current community

your communities

more stack exchange communities

Styling some, but not all table cells

3 Answers 3

Your Answer

Not the answer you're looking for? Browse other questions tagged javascript jquery css dom or ask your own question.

Hot Network Questions

Styling some, but not all table cells

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascript jquery css dom or ask your own question.

Related

Hot Network Questions