jQuery 表格隔行变色的代码(附js版)
发布时间：2015-10-12 编辑：jiaochengji.com
为大家介绍一人Jquery实现的隔行变色的代码，并提供一个js实现的代码作比较，有需要的朋友，可以参考下。
1、jquery隔行变色的代码
<!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=gb2312" /> <title>jquery 奇偶变色-隔行变色-www.jbxue.com</title> <script src="/jquery/jquery1.3.2.js"></script> <script> $(document).ready(function() { $('tr').addClass('odd'); $('tr:even').addClass('even'); //奇偶变色，添加样式 }); </script> <style> #hacker tr:hover{ background-color:red; //使用CSS伪类达到鼠标移入行变色的效果，比Jquery 的mouseover,hover 好用 } .odd { background-color: #ffc; /* pale yellow for odd rows */ } .even { background-color: #cef; /* pale blue for even rows */ } </style> </head> <body> <table id="hacker"> <tr> <td>As You Like It</td> <td>Comedy</td> </tr> <tr> <td>All's Well that Ends Well</td> <td>Comedy</td> </tr> <tr> <td>Hamlet</td> <td>Tragedy</td> </tr> <tr> <td>Macbeth</td> <td>Tragedy</td> </tr> <tr> <td>Romeo and Juliet</td> <td>Tragedy</td> </tr> <tr> <td>Henry IV, Part I</td> <td>History</td> </tr> <tr> <td>Henry V</td> <td>History</td> </tr> </table> </body> </html>2、js版的隔行变色代码
<html> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-CN" /> <style type="text/css"> <!-- #senfe { width: 300px; border-top: #000 1px solid; border-left: #000 1px solid; } #senfe td { border-right: #000 1px solid; border-bottom: #000 1px solid; } --></style> <script language="javascript"><!-- function senfe(o,a,b,c,d){ var t=document.getElementById(o).getElementsByTagName("tr"); for(var i=0;i<t.length;i++){ t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b; t[i].onclick=function(){ if(this.x!="1"){ this.x="1";//本来打算直接用背景色判断，FF获取到的背景是RGB值，不好判断 this.style.backgroundColor=d; }else{ this.x="0"; this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b; } } t[i].onmouseover=function(){ if(this.x!="1")this.style.backgroundColor=c; } t[i].onmouseout=function(){ if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b; } } } --></script> </head> <body> <table 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"><!-- //senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景"); senfe("senfe","#fff","#ccc","#cfc","#f00"); --></script> </body> </html>您可能感兴趣的文章：
jQuery 表格隔行换色 鼠标高亮行变色的实现代码
javascript实现隔行变色函数代码一例
jQuery 行背景颜色的交替显示(隔行变色)实现代码
JS控制表格隔行变色的实现代码
Jquery表格隔行变色的代码
js 隔行变色的最简单代码
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
JQuery实现表格隔行换色(隔行变色)效果代码一例
js 隔行变色与鼠标悬停自动变色的实现代码
js 隔行变色 鼠标经过变色的代码
[关闭]