使用javascript使特定的表格隔行变色

来源：互联网发布：知乎怎么注册编辑：程序博客网时间：2024/05/19 04:03

特定的表格隔行变色

（1）根据表格的id获取表格。

（2）在表格内获取<tbody>元素。

（3）在<tbody>元素下获取<tr>元素。

（4）循环输出获取的<tr>元素。

（5）对<tr>元素的索引值除以2并取模，然后根据奇偶设置不同的背景色。

    javascript代码：    var tb =document.getElementById("table");//获取id为table的元素    var tbody=tb.getElementsByTagName("tbody")[0];//获取表格的第一个tbody元素    var trs=tbody.getElementsByTagName("tr");//获取tbody元素下的所有tr元素    for(var i=0;i<trs.length;i++){ //循环tr元素       if(i%2==0){  //取模(取余数。例如0%2==0;1%2==1;2%2==0)          trs[i].style.backgroundColor="#7FFFD4";//改变符合条件的tr元素的背景色          }        else{          trs[i].style.backgroundColor="#C1C1C1";//改变其他行的背景色          }         }

    html代码：     <table id="table">               <tbody>                 <tr><td>花褪残红青杏小</td></tr>                 <tr><td>燕子飞时,绿水人家绕</td></tr>                 <tr><td>枝上柳绵吹又少</td></tr>                 <tr><td>天涯何处无芳草</td></tr>                 <tr><td>墙里秋千墙外道</td></tr>                 <tr><td>墙外行人，墙里佳人笑</td></tr>                 <tr><td>笑渐不闻声渐悄，多情却被无情恼。</td></tr>               </tbody>           </table>

1 0