table column & row highlighting
HTML
<table>
<colgroup></colgroup>
<colgroup class="slim"></colgroup>
<colgroup class="slim"></colgroup>
<colgroup class="slim"></colgroup>
<colgroup class="slim"></colgroup>
<thead>
<tr>
<th><label class="a"></label></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><label class="a"></label></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><label class="a"></label></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table>
<colgroup></colgroup>
<colgroup class="slim"></colgroup>
<colgroup class="slim"></colgroup>
<colgroup class="slim"></colgroup>
<colgroup class="slim"></colgroup>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><label class="a"></label></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><label class="a"></label></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table>
<colgroup></colgroup>
<colgroup class="slim"></colgroup>
<colgroup class="slim"></colgroup>
<colgroup...
CSS
body {
background: #FF73E5;
}
table {
background: #FFF;
border-collapse: collapse;
width: 100%;
margin-bottom: 10px;
}
td, th {
border: 1px solid #36ABFF;
padding: 10px;
}
.slim {
width: 88px;
}
.hover {
background-color: deeppink;
}
JavaScript
$(document).ready(function () {
$('table').each(function () {
var $table = $(this).delegate('td', 'mouseover mouseleave', function (e) {
if (e.type == 'mouseover') {
$(this).parent().addClass('hover');
$table.find('tr td').eq($(this).index()).addClass('hover');
} else {
$(this).parent().removeClass('hover');
$table.find('tr td').eq($(this).index()).removeClass('hover');
}
});
});
});