最近客户要求高亮选择列表的功能，于是顺便做了个，作为记录。
前台代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JQuer的鼠标悬浮，鼠标高亮效果</title> <style type="text/css"> #header { background-color:#00ffff; text-align:center; } .style1 { text-align: right; } .style2 { text-align: center; } </style> <link href="https://www.jb51.net/tables.css" type="text/css" /> <script src="https://www.jb51.net/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { doChangeColorOfRow("#tableThis tr:even:not(#header)", "#tableThis tr:odd:not(#header)"); }); function doChangeColorOfRow(evenTR, oddTR) { $(evenTR).each(function() { $(this).css("background-color", "#F0F8FF").bind("mouseover", function() { if ($(this).css("background-color") != "#ffff00") { $(this).css("background-color", "#D8FAD8"); } }).bind("mouseout", function() { if ($(this).css("background-color") != "#ffff00") { $(this).css("background-color", "#F0F8FF"); } }).bind("click", function() { $(evenTR).each(function() { if ($(this).css("background-color") == "#ffff00") { $(this).css("background-color", "#F0F8FF"); } }); $(oddTR).each(function() { if ($(this).css("background-color") == "#ffff00") { $(this).css("background-color", "#ffffff"); } }); $(this).css("background-color", "#ffff00"); }); }); $(oddTR).each(function() { $(this).css("background-color", "#ffffff").bind("mouseover", function() { if ($(this).css("background-color") != "#ffff00") { $(this).css("background-color", "#D8FAD8"); } }).bind("mouseout", function() { if ($(this).css("background-color") != "#ffff00") { $(this).css("background-color", "#ffffff"); } }).bind("click", function() { $(evenTR).each(function() { if ($(this).css("background-color") == "#ffff00") { $(this).css("background-color", "#F0F8FF"); } }); $(oddTR).each(function() { if ($(this).css("background-color") == "#ffff00") { $(this).css("background-color", "#ffffff"); } }); $(this).css("background-color", "#ffff00"); }); }); } </script> </head> <body> <form runat="server"> <table cellpadding="0" cellspacing="0"> <tr> <td>纳税人</td> <td> 增值税</td> <td> 消费税</td> <td> 营业税</td> <td>小规模纳税人</td> <td>增值税小规模纳税人</td> </tr> <tr> <td>张三</td> <td> 123423432.12</td> <td> 32445345.13</td> <td> 345564.25</td> <td>567657567.78</td> <td>3454353453.90</td> </tr> <tr> <td>李四</td> <td> 34435345.34</td> <td> 456546</td> <td> 675675</td> <td>678879789</td> <td>34534534.0</td> </tr> <tr> <td>王五</td> <td> 23424</td> <td> 6546</td> <td> 67868</td> <td>980890</td> <td>45345</td> </tr> <tr> <td>刘六</td> <td> 234234</td> <td> 123123</td> <td> 324234</td> <td>342423</td> <td>345345</td> </tr> <tr> <td>赵七</td> <td> 345345</td> <td> 546546</td> <td> 567567</td> <td>67867867</td> <td>67867</td> </tr> <tr> <td>王八</td> <td> 345354</td> <td> 345345</td> <td> 5654</td> <td>567658678</td> <td>879879789</td> </tr> <tr> <td>李九</td> <td> 34535</td> <td> 4534</td> <td> 756765</td> <td>867867</td> <td>897987987</td> </tr> <tr> <td>周十</td> <td> 456434534</td> <td> 546456 </td> <td> 5675756</td> <td>67867867</td> <td>8797987</td> </tr> </table> </form> </body> </html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》