JQuery 表格隔行变色与突出显示当前行的代码一例
发布时间：2015-10-12 编辑：jiaochengji.com
为大家介绍一个Jquery实现的表格隔行变色并突出显示当前行的代码，有需要的朋友，不妨参考学习下了。
jquery实现表格隔行变色和突出显示当前行的代码。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>表格隔行背景和突出显示当前行-www.jbxue.com</title> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <style type="text/css"> body{ margin:0 auto; font-size:12px;} .data_list td{ width:100px;} </style> <script type="text/javascript"> /* 当鼠标移到表格上是，当前一行背景变色 */ $(document).ready(function(){ $(".data_list tr td").mouseover(function(){ $(this).parent().find("td").css("background-color","#d5f4fe"); }); }) /* 当鼠标在表格上移动时，离开的那一行背景恢复 */ $(document).ready(function(){ $(".data_list tr td").mouseout(function(){ var bgc = $(this).parent().attr("bg"); $(this).parent().find("td").css("background-color",bgc); }); }) $(document).ready(function(){ var color="#ffeab3" $(".data_list tr:odd td").css("background-color",color); //改变偶数行背景色 /* 把背景色保存到属性中 */ $(".data_list tr:odd").attr("bg",color); $(".data_list tr:even").attr("bg","#fff"); }) </script> </head> <body> <table class="data_list"> <tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr> <tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr> <tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr> <tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr> <tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr> <tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr> <tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr> <tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr> </table> </body> </html> 效果如下图所示：
您可能感兴趣的文章：
javascript实现隔行变色函数代码一例
JQuery 表格隔行变色与突出显示当前行的代码一例
jQuery 表格隔行换色 鼠标高亮行变色的实现代码
js 隔行变色与鼠标悬停自动变色的实现代码
JS控制表格隔行变色的实现代码
用JQuery实现表格隔行变色和突出显示当前行的代码
js 隔行变色的最简单代码
JQuery实现表格隔行换色(隔行变色)效果代码一例
jQuery 行背景颜色的交替显示(隔行变色)实现代码
Js实现表格隔行变色，鼠标经过时高亮显示的代码
[关闭]