2019-11-28

最新推荐文章于 2022-06-02 10:21:47 发布

三号到期

最新推荐文章于 2022-06-02 10:21:47 发布

阅读量167

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_43418542/article/details/103285970

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用JS实现表格奇偶行的背景色填充

本实例使用了table标签的新元素thead、tbody，再结合tbody属性tBodies[0].rows.length。匿名函数及页面加载事件onload
实现奇偶行不同背景颜色的核心思想是:对tbody里面的行进行遍历

<!doctype html>
<html>
  <head>
    <meta charset="gb2312">
    <title>使用js为表格的奇偶行添加不同的背景颜色</title>
    <script type="text/JavaScript">
      window.onload=function(){
        //1.获取表格
        var tbEle=document.getElementById("tb");
        //2.获取表格中tbody里面的行数(长度)
        var len=tbEle.tBodies[0].rows.length;
        //alert(len);
        //3.对tbody里面的行进行遍历
        for(var i=0;i<len;i++){
          if(i%2==0){
            //4.对偶数行进行设置背景颜色
            tbEle.tBodies[0].rows[i].style.backgroundColor="pink";
          }
          else{
            //4.对奇数行进行设置背景颜色
            tbEle.tBodies[0].rows[i].style.backgroundColor="yellow";
          }

        }
      }
    </script>
  </head>
  <body>
    <table border="1" width="400" height="50" align="center" id="tb">
      <thead>
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>出生日期</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>李四</td>
          <td>男</td>
          <td>1998/03/12</td>
        </tr>
        <tr>
          <td>2</td>
          <td>王五</td>
          <td>男</td>
          <td>1998/03/12</td>
        </tr>
        <tr>
          <td>3</td>
          <td>老王</td>
          <td>男</td>
          <td>1998/03/12</td>
        </tr>
        <tr>
          <td>4</td>
          <td>小红</td>
          <td>女</td>
          <td>1998/03/12</td>
        </tr>
        <tr>
          <td>5</td>
          <td>张麻子</td>
          <td>女</td>
          <td>1998/03/12</td>
        </tr>
        <tr>
          <td>6</td>
          <td>老李</td>
          <td>男</td>
          <td>1998/03/12</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

代码实现效果如下:
在这里插入图片描述

三号到期

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2019-11-28

使用JS实现表格奇偶行的背景色填充本实例使用了table标签的新元素thead、tbody，再结合tbody属性tBodies[0].rows.length。匿名函数及页面加载事件onload实现奇偶行不同背景颜色的核心思想是:对tbody里面的行进行遍历<!doctype html><html> <head> <meta charse...
复制链接

扫一扫