JQuery: table parser and CSS change

Question

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

The following 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 fine so far. But now I'm trying to replace the class for selected row to .bold and have to remove the same class from all other unselected rows - that's what showDetails(TODO) should do. I made several attempts (including based on the content as described here), but couldn't get it to work.

Please point me in the right direction (JQuery would be great ;). Many thanks!

Answer 1

Maybe you are talking about a jquery table hover plugin. In which case you might try looking at http://p.sohei.org/stuff/jquery/tablehover/demo/demo.html

Answer 2

Try this. 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 a 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>

Notice that in this way your html is not poluted with Javascript code, good separation of view and logic.