JQuery: parser table and change CSS
I have a table in the following format:
<table id="searchResultTable">
<tr>
<th>List</th>
</tr>
<tr onMouseOver="activeTr(this)"
onMouseOut="inactiveTr(this)" onClick="showDetails(TODO)">
<td><a href="javascript: void(0)">AAA</a></td>
</tr>
<tr onMouseOver="activeTr(this)"
onMouseOut="inactiveTr(this)" onClick="showDetails(TODO)">
<td><a href="javascript: void(0)">BBB</a></td>
</tr>
</table
Next CSS:
table#searchResultTable td {
text-align: left;
border-bottom: 1px solid #ECD7C2;
}
.bold {
font-weight: bold;
}
And the following JS functions:
function activeTr( row ) {
row.bgColor='#ECD7C2';
document.body.style.cursor = 'pointer';
}
function inactiveTr( row ) {
row.bgColor='transparent';
document.body.style.cursor = 'default';
}
Everything works perfectly. But now I am trying to replace the class for the highlighted line with .bold and to remove the same class from all other unselected lines - which is what it should do showDetails(TODO)
, I have made several attempts (including based on the content described here ) but not was able to make it work.
Please point me in the right direction (JQuery will be great;). Many thanks!
source to share
Try it. Table (with head and body):
<table id="searchResultTable">
<thead>
<tr>
<th>List</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="javascript: void(0)">AAA</a></td>
</tr>
<tr>
<td><a href="javascript: void(0)">BBB</a></td>
</tr>
</tbody>
</table>
add new css class:
.active{
background-color: #fab;
}
and some jquery magic:
<script type="text/javascript">
var activeRow;
$(function() {
$("#searchResultTable tbody tr").hover(function() {
this.bgColor = '#ECD7C2';
document.body.style.cursor = 'pointer';
}, function() {
this.bgColor = 'transparent';
document.body.style.cursor = 'default';
}).
click(function() {
$(activeRow).removeClass("active");
$(this).addClass("active");
activeRow = this;
});
});
</script>
Please note that this way your html will not be translated with Javascript code, good separation of view and logic.
source to share
You might be talking about a jQuery plugin for a table. In this case, you can try http://p.sohei.org/stuff/jquery/tablehover/demo/demo.html
source to share