打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
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=utf-8" />  
<title>给网页中的元素添加onclick事件</title>  
<script type="text/javascript" language="javascript" src="../jquery-1.7.1.min.js"></script>  
<script type="text/javascript" language="javascript">  
$(document).ready(function(){  
    var oldcolor;  
    $("tr").each(function(index,eleMe){  
                if(index%2==0){  
                    $(this).css("background-color","#ffff99");  
                    }else{  
                        $(this).css("background-color","#cccccc");  
                        }  
                    }).hover(  
                      
                    function(){  
                        //获取原有颜色  
                        oldcolor=$(this).css("background-color");  
                        newcolor=$(this).css("background-color","green")  
                        },function(){  
                            $(this).css("background-color",oldcolor);  
                            });  
      
    });  
  
</script>  
</head>  
<body>  
<table width="300" border="1">  
  <tr>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
  </tr>  
  <tr>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
  </tr>  
  <tr>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
  </tr>  
  <tr>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
  </tr>  
  <tr>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
  </tr>  
  <tr>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
  </tr>  
  <tr>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
  </tr>  
  <tr>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
    <td> </td>  
  </tr>  
</table>  
</body>  
</html>  
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
jQuery+CSS实现竖向漂亮的滑动导航
Jquery写的双色表格示例
看视频后的javascript_调试与优化
ajax 页面模型
JQuery 学习总结及实例
一样的table?不一样的table(可编辑状态table)
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服