JavaScript 表格高亮类的高级应用

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

导读：烈火网(LieHuo.Net)教程比较高级的 Java Script表格高亮类的应用，代码中的Js可以摘出来单独作为一个表格高亮的修饰类，使用很方便，可以控制表格某行、某列甚至是行列同时高亮显示，运行一下可以看效果。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 St

　　烈火网(LieHuo.Net)教程比较高级的JavaScript表格高亮类的应用，代码中的Js可以摘出来单独作为一个表格高亮的修饰类，使用很方便，可以控制表格某行、某列甚至是行列同时高亮显示，运行一下可以看效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>表格高亮</title> <meta http-equiv="Content-Type" content="text/html; charset=gbk"/> <style type="text/css"> * { font-size: 11px; font-family: verdana, arial, sans-serif; } table { border: 1px solid #ccc; margin: 0 auto; } th { background-color: #f7f7f7; } td, th { padding: 15px; border: 1px solid #ccc; } tr.alternate { background-color: #efd; } .bold { font-weight: bold; } .red { color: red; font-weight: bold; } .blue { background-color: blue; } /* Used with crosshairs.js */ .hoverHilight { background-color: #ffffc0; cursor: pointer; } .activeCellHilight { background-color: #c0dbff; color: blue; } </style> </head> <body> <table id="crossTable"> <tr> <th> </th> <th>编号</th> <th>姓名</th> <th>地址</th> <th>电话</th> </tr> <tr> <td class="bold">1</td> <td onmouseover="addHilight(this);" onmouseout="removeHilight(this);">a1</td> <td>b1</td> <td>c1</td> <td>d1</td> </tr> <tr class="alternate"> <td class="bold">2</td> <td>a2</td> <td>b2</td> <td>c2</td> <td>d2</td> </tr> <tr> <td class="bold">3</td> <td>a3</td> <td>b3</td> <td>c3</td> <td>d3</td> </tr> <tr class="alternate"> <td class="bold">4</td> <td>a4</td> <td>b4</td> <td>c4</td> <td>d4</td> </tr> <tr> <td class="bold">5</td> <td>a5</td> <td>b5</td> <td>c5</td> <td>d5</td> </tr> </table> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' title="liehuo.net" target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）