js代码;简单的隔行变色;不知道问题在哪里;求请教

zunlin118
  • 437

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function(){

   var qwe=document.getElementById('tab')
    
   for(var i=0; i<qwe.tBodies[0].rows.length;i++)

   {
         if(i%2)
       {
           qwe.tbodies[0].rows[i].style.background=''
           }
        else{
           qwe.tbodies[0].rows[i].style.background='#ccc'
            }
       }
   }

</script>
</head>

<body>

序号 名字 年龄
1 张三 23
2 赵六 34
3 王五 12
4 李四 23

</body>
</html>

回复
阅读 2.2k
11 个回答
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function(){
   var qwe=document.getElementById('tab');
   var tbRows = qwe.tBodies[0].rows;
   for(var i=0; i<tbRows.length;i++)
   {
       if(i%2)
       {
           tbRows[i].style.background='#fff';
       }
       else{
           tbRows[i].style.background='#ccc';
        }
    }
}
</script>
</head>

<body>
<table id="tab" width="500px">
<thead>
<tr><td>序号</td>
      <td>名字</td>
      <td>年龄</td>
   </tr></thead>
<tbody>
<tr>
<td>1</td>
       <td>张三</td>
       <td>23</td>
      </tr>
<tr>
<td>2</td>
       <td>赵六</td>
        <td>34</td>
      </tr>
<tr>
<td>3</td>
       <td>王五</td>
        <td>12</td>
     </tr>
<tr>
<td>4</td>
       <td>李四</td>
       <td>23</td>
      </tr>
</tbody>
</table>
</body>
</html>

把qwe.tBodies[0].rows定义在for循环外

<script>
window.onload=function(){
  var qwe=document.getElementById('tab');
    for(var i=0; i<qwe.tBodies[0].rows.length;i++)
    {
      if(i%2)
      {
        qwe.tBodies[0].rows[i].style.background='';
      }
      else{
        qwe.tBodies[0].rows[i].style.background='#ccc';
      }
    }
}
</script>

用console控制台一步步发现问题,语法错误也能够发现,单词拼错也可以发现B-b的区别

在css样式文件里控制不是更方便。。

qwe.tbodies[0].rows[i].style 应该为 tBodies!

注意大小写!!

比如:if(i%2==0)

i%2 == 0 把

你 if (i%2) 这样的写法是为ture
如果 i == 0 or 1 
其实是返回0的 0 应该是 ==  false

qwe.tBodies[0].rows.length检查看看有没有拿到值了

qwe.tbodies[0].rows[i].style.background=''应该改为qwe.tBodies[0].rows[i].style.background=''

利用CSS :nth-child也可以实现一样的效果,odd为奇数行,不过IE8不支持。

tbody>tr:nth-child(odd) {
    background: #ccc;
}

如果不为了兼容ie等浏览器的话,推荐用css写,简单很多。

zitup
  • 2
新手上路,请多包涵

tbodies应为tBodies,这错误浏览器f12有提示的

你知道吗?

宣传栏