JavaScript之使特定的表格隔行变色

来源：互联网发布：巨人网络私有化进程编辑：程序博客网时间：2024/04/29 03:00

思路

1.依据表格id获取表格使用方法 getElementById("元素id")

2.表格里获取<tbody>元素使用方法 getElementsByTagName("元素') 该方法返回的是标签名的对象的集合

3.在<tbody>下获取<tr>元素使用方法 getElementsByTagName("元素')

4.循环输出获取的<tr>元素 for循环输出

5.对<tr>元素的索引值除2取模，根据奇偶性设置不同背景色 if( %2==0)

源码如下：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script type="text/javascript">        window.onload=function(){                  var tb=document.getElementById("tab");//依据id获取表格          var tbody=tb.getElementsByTagName("tbody")[0];//获取表格的第一个tbody元素.getElementsByTagName() 方法可返回带有指定标签名的对象的集合          var  trs=tbody.getElementsByTagName("tr");//获取tbody下所有的tr元素          for(i=0;i<trs.length;i++)//循环输出tr          {              if(i%2==0)//取模/取余              {                  trs[i].style.backgroundColor="#888";//改变符合条件的背景色              }          }      }    </script></head><body><table id="tab"><tbody>    <tr><td>第一行</td><td>第一行</td></tr>    <tr><td>第二行</td><td>第二行</td></tr>    <tr><td>第三行</td><td>第三行</td></tr>    <tr><td>第四行</td><td>第四行</td></tr>    <tr><td>第五行</td><td>第五行</td></tr>    <tr><td>第六行</td><td>第六行</td></tr></tbody></table></body></html>

0 0