efficient highlight columns in table?
Hi there,
Seen a lot of scripts for highlight table rows, but found nothing to highlight columns, so figured I'd try making my first jQuery plugin.
Here's what I've got so far:
HTML:
-
<table id="popupTable">
<thead>
<tr><td>Name</td><td>Amount</td><td class="popupHide">Expenditure</td><td>Date</td></tr>
</thead>
<tbody>
<tr><td>Tesco</td><td>£134.45</td><td>£45.34</td><td>01/11/08</td></tr>
<tr><td>WHSmith</td><td>£12.23</td><td>£23.21</td><td>05/06/08</td></tr>
<tr><td>Esso</td><td>£114.45</td><td>£134.12</td><td>01/11/07</td></tr>
<tr><td>ASDA</td><td>£1.23</td><td>£21.21</td><td>05/02/08</td></tr>
</tbody>
</table>
<span id="popupDebug"></span>
</body>
</html>
Script:
-
$(document).ready(function () {
$("#popupTable tr:odd").css("background-color","#e2e2e2");
$("#popupTable tr").each(function(){
$(this).children("td:eq(1)").css("background-color","red");
});
// debug scripts
var popupColumnCount = $("#popupTable tr:eq(1) td").length;
$("#popupDebug").text("There are "+ popupColumnCount + " columns.");
});
Now I'm trying to make it as flexible for people as possible, so am trying to make it so if they put a class of popupHide in a thead td then it'll hide that whole column (rather than manually putting classes on each td element in that column which I'd worked out before)
I've managed to work out how to get the index of each column, but am struggling to think of the most efficient way to iterate through each row and apply a display:none to each.
Has anyone got any ideas?