JavaScript例子2-使一个特定的表格隔行变色
Posted 星辰郎周
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript例子2-使一个特定的表格隔行变色相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <script type="text/javascript">
7 /*window.onload = function() {
8 var item = document.getElementById("tb");
9 var tbody = document.getElementsByTagName("tbody");错误
10 var trs = tbody.getElementsByTagName("tr");
11 for(var i = 0; i < trs.length; i++) {
12 if(i%2==0){
13 trs[i].style.backgroundColor="greenyellow";
14 }
15 }
16
17 };*/
18 window.onload = function(){ //页面所有元素加载完毕
19 var item = document.getElementById("tb"); //获取id为tb的元素(table)
20 var tbody = item.getElementsByTagName("tbody")[0]; //获取表格的第一个tbody元素
21 var trs = tbody.getElementsByTagName("tr"); //获取tbody元素下的所有tr元素
22 for(var i=0;i < trs.length;i++){//循环tr元素
23 if(i%2==0){ //取模. (取余数.比如 0%2=0 , 1%2=1 , 2%2=0 , 3%2=1)
24 trs[i].style.backgroundColor = "#888"; // 改变 符合条件的tr元素 的背景色.
25 }
26 }
27
28 }
29 </script>
30 </head>
31 <body>
32 <table id="tb">
33 <tbody>
34 <tr><td>第一行</td><td>第一行</td></tr>
35 <tr><td>第二行</td><td>第二行</td></tr>
36 <tr><td>第三行</td><td>第三行</td></tr>
37 <tr><td>第四行</td><td>第四行</td></tr>
38 <tr><td>第五行</td><td>第五行</td></tr>
39 <tr><td>第六行</td><td>第六行</td></tr>
40 </tbody>
41 </table>
42 </body>
43 </html>
以上是关于JavaScript例子2-使一个特定的表格隔行变色的主要内容，如果未能解决你的问题，请参考以下文章