jquery实现隔行变色效果
2012-03-20 21:02
337 查看
<!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>简单各行变色</title> <script language="javascript" type="text/javascript" src="../../include/jquery.js"></script> <script language="javascript" type="text/javascript"> //使用jquery加载事件 $(document).ready(function (){ var oldcolor; $("tr").each(function (index,domEle){ if(index%2==0){ //设置偶数行的背景颜色 $(domEle).css("background","#ffff99"); }else{ //设置奇数行的背景颜色 $(domEle).css("background","#CCCCCC"); } //当鼠标移动到上方的时候执行事件 }).hover(function (){ //当鼠标移动到上方的时候先获取原来颜色 oldcolor=$(this).css("background-color"); //设置行的样式 $(this).css("background-color","green"); },function (){//当鼠标离开的时候执行的事件 //设置当鼠标离开后还原颜色 $(this).css("background-color",oldcolor); }); }); </script> </head> <body> <table width="416" border="1"> <tr> <td width="110">姓名</td> <td width="110">性别</td> <td width="110">年龄</td> <td width="110">电话</td> <td width="110">地址</td> </tr> <tr> <td>张三</td> <td>女</td> <td>12</td> <td>1593357053</td> <td>河北</td> </tr> <tr> <td>李四</td> <td>男</td> <td>15</td> <td>13312345677</td> <td>保定</td> </tr> <tr> <td>王五</td> <td>男</td> <td>20</td> <td>12354678996</td> <td>承德</td> </tr> <tr> <td>张三三</td> <td>女</td> <td>25</td> <td>12354678996</td> <td>石家庄</td> </tr> <tr> <td>李四四</td> <td>女</td> <td>24</td> <td>12354678996</td> <td>北京</td> </tr> <tr> <td>王五五</td> <td>男</td> <td>21</td> <td>12354678996</td> <td>北京</td> </tr> <tr> <td>赵六</td> <td>男</td> <td>23</td> <td>12354678996</td> <td>北京</td> </tr> </table> </body> </html>
相关文章推荐
- [原创]持续给力:jQuery实现表格隔行变色效果案例详解
- jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
- jquery实现隔行变色,点击换色,鼠标悬浮当前行变色效果,div+css 细表格样式
- 用jQuery实现的隔行变色效果
- 使用JQuery实现隔行变色的效果
- jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
- js实现隔行变色操作鼠标经过效果
- jQuery轻松实现表格的隔行变色和点击行变色的实例代码
- jquery实现隔行变色
- jquery实现table表的隔行变色功能
- 用js实现隔行变色的效果
- 使用Jquery+CSS实现的表格隔行凸显和当前行高亮效果
- jquery实现隔行换色效果
- 用JQuery实现表格隔行变色和突出显示当前行
- 使用Jquery+CSS实现的表格隔行凸显和当前行高亮效果
- 使用JQuery实现隔行变色
- JS与jQuery实现隔行变色的方法
- 使用Jquery+CSS实现的表格隔行凸显和当前行高亮效果
- jQuery实现选中行变色效果(实例讲解)
- jQuery组件开发之表格隔行选中效果实现