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

特定的表格隔行变色

(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
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值