表格隔行变色功能（原生JS和jequery 代码）

最新推荐文章于 2024-10-18 00:00:00 发布

weixin_34383618

最新推荐文章于 2024-10-18 00:00:00 发布

阅读量136

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/998304/blog/350605

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../jquery-1.3.1.js"></script>
<script>
/*
* 表格隔行变色原生js代码
*/
/*
window.οnlοad=function(){
   var tab=document.getElementById("table");
   var tr=tab.getElementsByTagName("tr");
      for(var i=0;i<tr.length;i++){
          if(i%2==1){
           tr[i].style.background="red";
          }else{
           tr[i].style.background="green";
          }
      }
}*/
/**
* jequery 实现表格隔行变色
*/
$(function(){
   $('#table tr').filter(':even').css('background','red').
   end().filter(':odd').css('background','green');
});
</script>
</head>
<body>
<div>
<table id="table">
   <tr>
       <td>fdfd</td><td>fdfdfd</td>
   </tr>
   <tr>
       <td>fdfd</td><td>fdfdfd</td>
   </tr>
   <tr>
       <td>fdfd</td><td>fdfdfd</td>
   </tr>
   <tr>
       <td>fdfd</td><td>fdfdfd</td>
   </tr>
</table>
</div>
</body>
</html>

转载于:https://my.oschina.net/u/998304/blog/350605