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.
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");
}
}
var i=1
and start there instead of adding another condition into the code? \$\endgroup\$ – Gary Storey Jan 8 '16 at 17:42.each
works, I wouldn't really worry about it unless it is really impacting your performance for some reason. \$\endgroup\$ – Gary Storey Jan 8 '16 at 17:49