‘out‘)" td align ="middle " 4 / td td align ="middle " 20100
当鼠标移动到表格的某一行的时候为红色,,鼠标移走的时候为白色。
<script> function changeColor(id,flag){ if(flag=="over"){ document.getElementById(id).style.backgroundColor="red"; }else if(flag=="out"){ document.getElementById(id).style.backgroundColor="white"; } } </script>
其时用某一行的时候,需要向函数中通报参数,即:表格的行位置和鼠标的状态。
<tr onmou搜索引擎优化ver="changeColor(‘tr1‘,‘over‘)" id="tr1" onmou搜索引擎优化ut="changeColor(‘tr1‘,‘out‘)"> <td align="middle ">1</td> <td align="middle ">20100300201</td> <td align="middle ">张小丽</td> <td align="middle ">95</td> <td align="middle ">95</td> <td align="middle ">95</td> </tr>
2、完整代码:
<html> <head> <meta charset="utf-8"> <title>成效登记表格</title> <script> function changeColor(id,flag){ if(flag=="over"){ document.getElementById(id).style.backgroundColor="red"; }else if(flag=="out"){ document.getElementById(id).style.backgroundColor="white"; } } </script> </head> <body> <table width="600" border="1" align="center" cellpadding="5" cellspacing="3" id="tbl"> <caption>成效登记表</caption> <thead> <tr> <th align="middle" >序号</th> <th align="middle ">学号</th> <th align="middle ">姓名</th> <th align="middle ">平时成效</th> <th align="middle ">期末成效</td> <th align="middle ">学期总成效</th> </tr> </thead> <tbody> <tr onmou搜索引擎优化ver="changeColor(‘tr1‘,‘over‘)" id="tr1" onmou搜索引擎优化ut="changeColor(‘tr1‘,‘out‘)"> <td align="middle ">1</td> <td align="middle ">20100300201</td> <td align="middle ">张小丽</td> <td align="middle ">95</td> <td align="middle ">95</td> <td align="middle ">95</td> </tr> <tr onmou搜索引擎优化ver="changeColor(‘tr2‘,‘over‘)" id="tr2" onmou搜索引擎优化ut="changeColor(‘tr2‘,‘out‘)"> <td align="middle ">2</td> <td align="middle ">20100300202</td> <td align="middle ">李宁</td> <td align="middle ">90</td> <td align="middle ">88</td> <td align="middle ">89</td> </tr> <tr onmou搜索引擎优化ver="changeColor(‘tr3‘,‘over‘)" id="tr3" onmou搜索引擎优化ut="changeColor(‘tr3‘,‘out‘)"> <td align="middle ">3</td> <td align="middle ">20100300203</td> <td align="middle ">刘梅</td> <td align="middle ">98</td> <td align="middle ">92</td> <td align="middle ">95</td> </tr> <tr onmou搜索引擎优化ver="changeColor(‘tr4‘,‘over‘)" id="tr4" onmou搜索引擎优化ut="changeColor(‘tr4‘,‘out‘)"> <td align="middle ">4</td> <td align="middle ">20100300204</td> <td align="middle ">王刚</td> <td align="middle ">98</td> <td align="middle ">90</td> <td align="middle ">94</td> </tr> <tr onmou搜索引擎优化ver="changeColor(‘tr5‘,‘over‘)" id="tr5" onmou搜索引擎优化ut="changeColor(‘tr5‘,‘out‘)"> <td align="middle ">5</td> <td align="middle ">20100300205</td> <td align="middle ">郑军</td> <td align="middle ">90</td> <td align="middle ">85</td> <td align="middle ">87</td> </tr> <tr onmou搜索引擎优化ver="changeColor(‘tr6‘,‘over‘)" id="tr6" onmou搜索引擎优化ut="changeColor(‘tr6‘,‘out‘)"> <td align="middle ">6</td> <td align="middle ">20100300206</td> <td align="middle ">杨波</td> <td align="middle ">80</td> <td align="middle ">80</td> <td align="middle ">80</td> </tr> </tbody> </table> </body> </html>
显示效果:
JS——表格高亮显示
温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/31106.html