table 隔行换色

最新推荐文章于 2021-08-24 22:55:33 发布

天蒙蒙亮

最新推荐文章于 2021-08-24 22:55:33 发布

阅读量678

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_38719039/article/details/81937846

版权

html 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<title>使用JavaScript隔行变色的效果</title>
<style type="text/css">
       body{font-size:12px;
            text-align:center
            }
       #tbStu{width:300px;
              border:solid 5px #666;
              background-color:#eee
              }              
       #tbStu tr{line-height:23px}
       #tbStu tr th{background-color:#ccc;     /*字段层的背景色：灰色*/
                               color:#fff      /*字段层的内容色(字体内容的颜色)：白色*/
       }       
       #tbStu .trOdd{background-color:#7bf740}  /*浅绿色*/ 
</style>
    
    
<script type="text/javascript">     
    window.onload=function(){ //进入页面立马自动加载
      var oTb =document.getElementById("tbStu");     //var oTb =$("#tbStu").val();  
    
      for(var i=1; i<oTb.rows.length; i++){ //通过for判断 是否 奇数 偶数 进行设置颜色
         if(i%2){
           oTb.rows[i].className="trOdd";
         }
      }
    }           
</script>
</head>
<body>
<table id="tbStu" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <th>学号</th><th>姓名</th><th>性别</th><th>总分</th>
    </tr>
     <!--奇数行-->
    <tr>
      <td>1001</td><td>张小明</td><td>男</td><td>320</td>
    </tr>
     <!--偶数行-->
    <tr>
      <td>1002</td><td>李明琪</td><td>女</td><td>350</td>
    </tr>
     <!--奇数行-->
    <tr>
      <td>1001</td><td>张小明</td><td>男</td><td>320</td>
    </tr>
     <!--偶数行-->
    <tr>
      <td>1002</td><td>李明琪</td><td>女</td><td>350</td>
    </tr>
     <!--奇数行-->
    <tr>
      <td>1001</td><td>张小明</td><td>男</td><td>320</td>
    </tr>
    <!--偶数行-->
    <tr>
      <td>1002</td><td>李明琪</td><td>女</td><td>350</td>
    </tr>
    <!--...-->
  </tbody>
</table>
</body>
</html>