关闭

使用javascript实现隔行变色

136人阅读 评论(0) 收藏 举报
<!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>
    <title>使用JavaScript实现隔行变色</title>
    <style type="text/css">
           body{font-size:12px;text-align:center}
           #tbStu{width:260px;border:solid 1px #666;background-color:#eee}
           #tbStu tr{line-height:23px}
           #tbStu tr th{background-color:#ccc;color:#fff}
           #tbStu .trOdd{background-color:#fff}
    </style>
    <script type="text/javascript">
         window.onload=function(){
         var oTb=document.getElementById("tbStu");
         for(var i=0;i<oTb.rows.length-1;i++){
             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>
    <!--...-->
  </tbody>
</table>
</body>
</html>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:9922次
    • 积分:124
    • 等级:
    • 排名:千里之外
    • 原创:1篇
    • 转载:24篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档