New on DHTMLGoodies.com:
DHTML Chess is now available for WordPress at WordPressChess.com.
Download highlight table row script
Put this into your <HEAD> section
Put this into your <BODY> section
Configuration
Step 1: Define rollover effects layout in CSS
This script assignes a row to a CSS(Cascading Style Sheet) class when you move your mouse over it. In the demo, I have created 2 CSS classes, one for the first table and another one for the other. This is the CSS code I use:
.tableRollOverEffect1{
background-color:#317082;
color:#FFF;
}
.tableRollOverEffect2{
background-color:#000;
color:#FFF;
}
Step 2: Define row click effects in CSS
You may specify row colors when someone clicks on a row. In the demo, I have these two CSS classes:
.tableRowClickEffect1{
background-color:#F00;
color:#FFF;
}
.tableRowClickEffect2{
background-color:#00F;
color:#FFF;
}
You will find this code in the <STYLE type="text/css"> section.
Step 3: Build your table
Now, you create your table by use of plain HTML. Example:
<table id="myTable">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Position</td>
<td>Income</td>
<td>Gender</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>37</td>
<td>Managing director</td>
<td>90.000</td>
<td>Male</td>
</tr>
<tr>
<td>Susan</td>
<td>34</td>
<td>Partner</td>
<td>90.000</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>29</td>
<td>Head of production</td>
<td>70.000</td>
<td>Male</td>
</tr>
</tbody>
</table>
Remember to give your table an ID(example: "myTable"). Also notice that I have used a <THEAD> and a <TBODY> tag to separate table heading from table content. When a <TBODY> tag exists in your table, the script will only highlights the rows within this tag, i.e. all rows except the heading. Without this TBODY tag, all rows will be highlighted.
Step 4: Call javascript function
The last thing you have to do is to call a Javascript function which adds the rollover effect. Example:
<script type="text/javascript">
addTableRolloverEffect('myTable','tableRollOverEffect1','tableRowClickEffect1');
addTableRolloverEffect('myTable2','tableRollOverEffect2','tableRowClickEffect2');
</script>
The addTableRolloverEffect takes three arguments. The first one is the "id" of the table. The second one is the name of the css class you want to assign to the rows when the mouse rolls over it.
The last argument is the name of a CSS class that will be assigned to the row when someone clicks on it. This argument is optional. If you don't want a onclick effect, just use false as argument(example: addTableRolloverEffect('myTable','tableRollOverEffect1','tableRowClickEffect1');).
I have called this function twice in this demo because I wanted to add this effect to two tables.
But could you plz explain how to exclude a single row from the rollover effect
Post your comment
Comment preview: