js表格隔行变色,响应鼠标三态变化代码

发布时间：2018-08-16 20:49 所属栏目：121 来源：站长网

导读：js表格隔行变色效果，以前烈火发表过很此类文章（使用站内搜索查询以前文章）。具体介绍：当鼠标划过的时候变色，当鼠标点击的时候换色，不是简单的隔行换色，是三态的，即正常、滑过、选中三种状态的表格，效果不错，在显示比较多的表格数据的时候相当

　　js表格隔行变色效果，以前烈火发表过很此类文章（使用站内搜索查询以前文章）。

　　具体介绍：

　　当鼠标划过的时候变色，当鼠标点击的时候换色，不是简单的隔行换色，是三态的，即正常、滑过、选中三种状态的表格，效果不错，在显示比较多的表格数据的时候相当有用，提升表格浏览体验。

　　实例演示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>神奇的隔行变色</TITLE> <style type="text/css">  </style> <script language="javascript"> </script> </HEAD> <body bgcolor="#ECF2F4"> <TABLE width="100%" cellPadding="0" cellSpacing="0" border="0" > <TBODY> <TR><TD align="center"> <a name="top"> </a> <TABLE width="95%" cellPadding="0" cellSpacing="0" border="0" > <TR><TD height="40"> </TD></TR> <TR><TD align="center"><h4><b>神奇的隔行变色</b></h4></TD></TR> <TR><TD height="2" bgcolor="#CC6666"></TD></TR> <TR><TD height="3" bgcolor="#ECF2F4"></TD></TR> <TR><TD height="1" bgcolor="#CC6666"></TD></TR> <TR><TD height="20" bgcolor="#ECF2F4"></TD></TR> </TABLE></TD></TR> <TR><TD> <table align="center" border="0" cellpadding="0" cellspacing="0" id="senfe"> <tr><td>　</td><td>　</td><td>　</td><td>　</td></tr> <tr><td>　</td><td>　</td><td>　</td><td>　</td></tr> <tr><td>　</td><td>　</td><td>　</td><td>　</td></tr> <tr><td>　</td><td>　</td><td>　</td><td>　</td></tr> <tr><td>　</td><td>　</td><td>　</td><td>　</td></tr> <tr><td>　</td><td>　</td><td>　</td><td>　</td></tr> <tr><td>　</td><td>　</td><td>　</td><td>　</td></tr> <tr><td>　</td><td>　</td><td>　</td><td>　</td></tr> <tr><td>　</td><td>　</td><td>　</td><td>　</td></tr> <tr><td>　</td><td>　</td><td>　</td><td>　</td></tr> </table> <script language="javascript"></script> </TD></TR> <TR><TD> <TABLE align="center" bgColor="#ECF2F4" width="95%" border=0> <TR><TD height="20" bgcolor="#ECF2F4"></TD></TR> <TR><TD align="right" bgcolor="#ECF2F4"> </TD></TR> <TR><TD height="10" bgcolor="#ECF2F4"></TD></TR> <TR><TD height="1" bgcolor="#CC6666"></TD></TR> <TR><TD height="2" bgcolor="#ECF2F4"></TD></TR> <TR><TD height="2" bgcolor="#CC6666"></TD></TR> </TABLE></TD></TR> </TBODY> </TABLE> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）