Hey,
I've got my table set up. The rows all work backwards and forwards,
and I've got the columns disabled that I want disabled. But I have
searched and tested and I can't find any method of mouseover
highlighting that works. For some reason, addClass and removeClass
don't seem to work. I know just enough to know that I've exhausted my
meager knowledge.
(p.s. is it possible to add a column that is exempt from sorting?
something like the number column to the far left in an excel
document?)
This is the code I'm working with:
----------------------------
jquery
$(document).ready(function() {
$.tablesorter.defaults.widgets = ['zebra'];
$("#myTable").tablesorter({headers: {5:
{sorter: false},
6: {sorter: false},
7: {sorter: false},
8: {sorter: false},
9: {sorter: false},
10: {sorter: false},
11: {sorter: false}
}
});
$(".tablesorter tr").mouseover(function(){
$(this).addClass("over");});
$(".tablesorter tr").mouseout(function(){
$(this).removeClass("over");});
});
------------------------------
css
.over
{
background-color: #fff880;
}
table#myTable tbody tr.odd
{
background-color: #edf3ff;
}
table#myTable tbody tr.even
{
background-color: #ffffff;
}
------------------------
html
<table id="header">
<tr>
<td>~ 2010 VBS Review ~</td>
</tr>
</table>
<table id="myTable" class="tablesorter">
<thead>
<tr style="cursor:default">
<th>Title</th>
<th>Publisher</th>
<th>Major Theme</th>
<th>Minor Theme</th>
<th>Setting</th>
<th>Daily Points</th>
<th>Daily Verses</th>
<th>Daily Stories</th>
<th>Characters</th>
<th>Songs</th>
<th>Crafts</th>
<th>Games</th>
<th>Price</th>
</tr>
<tr>
<td>title</td>
<td>publisher</td>
<td>major theme</td>
<td>minor theme</td>
<td>setting</td>
<td>daily points</td>
<td>daily verses</td>
<td>dailystories</td>
<td>characters</td>
<td>songs</td>
<td>crafts</td>
<td>games</td>
<td>prices</td>
</tr>
</body>
