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

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

 var qwe=document.getElementByIdtab forvar i=0; i<qwe.tBodies[0].rows.length;i++ { ifi%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>

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function{ var qwe=document.getElementByIdtab; var tbRows = qwe.tBodies[0].rows; forvar i=0; i<tbRows.length;i++ { ifi%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.getElementByIdtab; forvar i=0; i<qwe.tBodies[0].rows.length;i++ { ifi%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!

注意大小写!!

比如:ifi%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-childodd { background: #ccc;
}

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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注