I see this post on highlighting even columns but can I highlight only selected columns?
Here is the code they use:
$("table.Table22 > tbody > tr > td:nth-child(even)").css("background","blue");
But I would like: NOTE: the class="highlight"
will be on the selected columns, so if I selected column 3 the class="highlight"
would be removed from column 2 and added to column 3. jQuery needs to add the class based on selected column.
<table class="tbl">
<tr>
<th class="firstColumn">
Cell 1:Heading
</th>
<th class="highlight">
Selected column so this should be highlighted
</th>
<th>
Cell 3:Heading
</th>
<th>
Cell 4:Heading
</th>
<th>
Cell 5:Heading
</th>
</tr>
<tr>
<td>
Cell 1:Row 1
</td>
<td class="highlight">
Selected column so this should be highlighted
</td>
<td>
Cell 3:Row 1
</td>
<td>
Cell 4:Row 1
</td>
<td>
Cell 5:Row 1
</td>
</tr>
<tr>
<td>
Cell 1:Row 2
</td>
<td class="highlight">
Selected column so this should be highlighted
</td>
<td>
Cell 3:Row 2
</td>
<td>
Cell 4:Row 2
</td>
<td>
Cell 5:Row 2
</td>
</tr>
</table>
You might want to take a look at jQuery tableHover plugin to achieve this. Then use something like this
$('table.tbl').tableHover({
colClass: 'hover',
clickClass: 'click',
headCols: true,
footCols: true
});
EDIT:
Something like this?
Working Demo - Click on any cell, to highlight the column
Code from demo -
$(function() {
var rows = $('table.tbl tr');
rows.children().click(function() {
rows.children().removeClass('highlight');
var index = $(this).prevAll().length;
rows.find(':nth-child(' + (index + 1) + ')').addClass('highlight');
});
});