表格高亮度显示，当鼠标移到表格的某一页上去，此行颜色加深，鼠标离开后，恢复。点击下面的运行即可看到运行效果
[code]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格高亮</title>
<style type="text/css">
body{
font-size:0.8em;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
margin:0px;
padding:0px;
}
img{
border:0px;
}
thead td{
font-weight:bold;
color:#000;
background-color:#E2EBED;
}
td{
padding:2px 4px;
}
table{
border:1px solid #000;
border-collapse: collapse;
font-family: "Courier New", Courier, monospace;
}
h1{
font-size:1.3em;
margin-bottom:0px;
}
table,h1,p,#ads{
margin-left:10px;
}
#ads{
margin-top:20px;
}
/* These classes are used by the script as rollover effect for table 1 and 2 */
.tableRollOverEffect1{
background-color:#317082;
color:#FFF;
}
.tableRollOverEffect2{
background-color:#000;
color:#FFF;
}
.tableRowClickEffect1{
background-color:#F00;
color:#FFF;
}
.tableRowClickEffect2{
background-color:#00F;
color:#FFF;
}
.differ{ background-color: #fffee9; }
</style>
<script type="text/javascript">
Fx = function(el, over, hot) {
var els = document.getElementById(el).getElementsByTagName("tr"), el2, el3,
del = function(el, css) {
el.className = el.className.replace(eval('/\\b' + css + '\\b/ig'), '');
return el;
},
add = function(el, css) {
if (el.className.indexOf(css) == -1) el.className += ' ' + css;
return el;
};
for (var i = 0; i < els.length; ++i) {
el = els[i];
el.onmouseover = function() {
if (el2) del(el2, over);
el2 = add(this, over);
};
el.onmouseout = function() {
del(this, over);
};
el.onclick = function() {
if (el3) del(el3, hot);
el3 =add(this, hot);
};
};
};
</script>
</head>
<body>
<h1>Table example 1</h1>
<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>
<tr>
<td>Laura</td>
<td>29</td>
<td>Head of marketing</td>
<td>70.000</td>
<td>Female</td>
</tr>
<tr>
<td>Kate</td>
<td>18</td>
<td>Marketing</td>
<td>50.000</td>
<td>Female</td>
</tr>
<tr>
<td>Mona</td>
<td>21</td>
<td>Marketing</td>
<td>53.000</td>
<td>Female</td>
</tr>
<tr>
<td>Mike</td>
<td>21</td>
<td>Marketing</td>
<td>53.000</td>
<td>Male</td>
</tr>
<tr>
<td>Mark</td>
<td>25</td>
<td>Production</td>
<td>52.000</td>
<td>Male</td>
</tr>
</tbody>
</table>
<h1>Table example 2</h1>
<table id="myTable2">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Position</td>
<td>Income</td>
<td>Gender</td>
</tr>
</thead>
<tr>
<td>Peter</td>
<td>33</td>
<td>Production</td>
<td>55.000</td>
<td>Male</td>
</tr>
<tr>
<td>Jennifer</td>
<td>24</td>
<td>Production</td>
<td>49.000</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>25</td>
<td>Photography</td>
<td>51.000</td>
<td>Male</td>
</tr>
<tr>
<td>Anna</td>
<td>42</td>
<td>Head of photography</td>
<td>56.000</td>
<td>Female</td>
</tr>
<tr>
<td>Rita</td>
<td>30</td>
<td>Photography</td>
<td>54.000</td>
<td>Female</td>
</tr>
<tr>
<td>Magnus</td>
<td>25</td>
<td>Freelancer</td>
<td>65.000</td>
<td>Male</td>
</tr>
<tr class="differ">
<td>Johnny</td>
<td>29</td>
<td>Freelancer</td>
<td>63.000</td>
<td>Male</td>
</tr>
</table>
<script type="text/javascript">
Fx('myTable','tableRollOverEffect1','tableRowClickEffect1');
Fx('myTable2','tableRollOverEffect2','tableRowClickEffect2');
</script>
</body>
</html>[/code]