Refine for Loop
Goal: Mimic .each() functionality in a for loop.
by dixalex
HTML
<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
...
CSS
table {
border-collapse: collapse;
}
td,
tr {
border: none;
}
JavaScript
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 >= 0) {
headerTD.eq(i).not(omitTD).css("background-color", "#CCC");
}
}
//for loop only detects they the first row
//--------------------------------------------------
for (var i = 0, len = headerTD.length; i < len; i++) {
if (headerTD.eq(i).index() != omitTD.eq(i).index()) {
//headerTD.eq(i).css("background-color", "blue");
}
}
//for loop only detects they the first row also
//--------------------------------------------------
for (var i = 0, len = headerTD.length; i < len; i++) {
//headerTD.eq(i).not(omitTD.eq(i)).css("background-color", "orange");
}
headerTD.text('Target This');
omitTD.text('Dont Target');