• 利用js制作表格隔行变色


    表格隔行变色

    <!-- 表格的隔行变色 -->        
    <table  border="1"cellspacing="0" cellpadding="0">
        <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>电话</th>
        </tr>
    </thead>
    <tbody  id="tab">
        <tr>
          <td>张三</td>
          <td>23</td>
          <td>男</td>
          <td>110</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>34</td>
            <td>男</td>
            <td>114</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>28</td>
            <td>男</td>
            <td>120</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>23</td>
            <td>男</td>
            <td>110</td>
          </tr>
          <tr>
              <td>张三</td>
              <td>34</td>
              <td>男</td>
              <td>114</td>
          </tr>
          <tr>
              <td>张三</td>
              <td>28</td>
              <td>男</td>
              <td>120</td>
          </tr>
          <tr>
            <td>张三</td>
            <td>23</td>
            <td>男</td>
            <td>110</td>
          </tr>
          <tr>
              <td>张三</td>
              <td>34</td>
              <td>男</td>
              <td>114</td>
          </tr>
          <tr>
              <td>张三</td>
              <td>28</td>
              <td>男</td>
              <td>120</td>
          </tr>
    </tbody>
      </table>
        </body>
        <script>
    
            var otab=document.getElementById("tab")
            console.log(otab.children.length)
            for(var i=0;i<otab.children.length;i++){
            if(i%2==0){
                otab.children[i].style.background="yellowgreen"
            }else{
            otab.children[i].style.background="tomato"
            }
        }
    </script>
    请用今天的努力,让明天没有遗憾。
  • 相关阅读:
    【数论】错排问题
    【数论】求逆元的几种方式
    【数论】卢卡斯定理模板 洛谷P3807
    【单调队列优化dp】 分组
    【期望dp】绵羊跳弹簧
    软件工程总结
    结对项目-地铁出行路线规划程序(续)
    个人作业--week3
    个人作业-week2
    个人作业-week1
  • 原文地址:https://www.cnblogs.com/cupid10/p/15617780.html
Copyright © 2020-2023  润新知