zoukankan      html  css  js  c++  java
  • 表格隔行变色

    方法1:CSS:

        

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>表格隔行变色--CSS实现隔行变色</title>
    <style>
    .datalist{border: 1px solid #007108;font-family: arial; border-collapse: collapse; background-color: #d9ffdc;/*表格背景色*/font-size: 14px;}
    .datalist tr th{background-color:#72E67B;border: 1px solid #007108;}
    .datalist tr td{border: 1px solid #007108;}
    .datalist tr.altrow{background-color: #a5e5aa;/*隔行变色*/}

    </style>
    </head>
    <body>
    <table class="datalist" summary="list of members in EE Studay" id="oTable">
    <tr>
    <th scope="col">Name</th>
    <th scope="col">Class</th>
    <th scope="col">Birthday</th>
    <th scope="col">Consteliation</th>
    <th scope="col">Mobile</th>
    </tr>
    <tr> <!--//奇数行-->
    <td>isaac</td>
    <td>W13</td>
    <td>Jun 24th</td>
    <td>Cancer</td>
    <td>11180</td>
    </tr>
    <tr class="altrow"> <!--//偶数行-->
    <td>liqong</td>
    <td>W14</td>
    <td>Dec 24th</td>
    <td>Cancer</td>
    <td>11182</td>
    </tr>
    <tr> <!--//奇数行-->
    <td>isaac</td>
    <td>W13</td>
    <td>Jun 24th</td>
    <td>Cancer</td>
    <td>11180</td>
    </tr>
    <tr class="altrow"> <!--//偶数行-->
    <td>liqong</td>
    <td>W14</td>
    <td>Dec 24th</td>
    <td>Cancer</td>
    <td>11182</td>
    </tr>
    <tr> <!--//奇数行-->
    <td>isaac</td>
    <td>W13</td>
    <td>Jun 24th</td>
    <td>Cancer</td>
    <td>11180</td>
    </tr>
    <tr class="altrow"> <!--//偶数行-->
    <td>liqong</td>
    <td>W14</td>
    <td>Dec 24th</td>
    <td>Cancer</td>
    <td>11182</td>
    </tr>
    </table>
    </body>
    </html>

    方法2:javascript:

        

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>表格隔行变色javaScript.html</title>
    <style>
    .datalist{border: 1px solid #007108;font-family: arial; border-collapse: collapse; background-color: #d9ffdc;/*表格背景色*/font-size: 14px;}
    .datalist tr th{background-color:#72E67B;border: 1px solid #007108;}
    .datalist tr td{border: 1px solid #007108;}
    .datalist tr.altrow{background-color: #a5e5aa;/*隔行变色*/}

    </style>
    <script>
    window.onload=function(){
    var oTable=document.getElementById('oTable');
    for(var i=0;i<oTable.rows.length;i++){
    if(i%2==0) //偶数行
    oTable.rows[i].className='altrow';
    }
    }
    </script>
    </head>
    <body>
    <table class="datalist" summary="list of members in EE Studay" id="oTable">
    <tr>
    <th scope="col">Name</th>
    <th scope="col">Class</th>
    <th scope="col">Birthday</th>
    <th scope="col">Consteliation</th>
    <th scope="col">Mobile</th>
    </tr> <!--不需要手动添加css类别-->
    <tr>
    <td>isaac</td>
    <td>W13</td>
    <td>Jun 24th</td>
    <td>Cancer</td>
    <td>11180</td>
    </tr>
    <tr>
    <td>liqong</td>
    <td>W14</td>
    <td>Dec 24th</td>
    <td>Cancer</td>
    <td>11182</td>
    </tr>
    <tr>
    <td>isaac</td>
    <td>W13</td>
    <td>Jun 24th</td>
    <td>Cancer</td>
    <td>11180</td>
    </tr>
    <tr>
    <td>liqong</td>
    <td>W14</td>
    <td>Dec 24th</td>
    <td>Cancer</td>
    <td>11182</td>
    </tr>
    <tr>
    <td>isaac</td>
    <td>W13</td>
    <td>Jun 24th</td>
    <td>Cancer</td>
    <td>11180</td>
    </tr>
    <tr>
    <td>liqong</td>
    <td>W14</td>
    <td>Dec 24th</td>
    <td>Cancer</td>
    <td>11182</td>
    </tr>
    </table>
    </body>
    </html>

    方法3:JQuery:

        

    <script type="text/javascript" src="js/jquery-1.12.1.min.js" ></script>
    <script>

    <script>
    $(function(){
    $('table.datalist tr:nth-child(odd)').addClass('altrow');//隔行变色
    $('td:nth-child(1)').addClass('onece'); //所有表格的第一个单元格,就是第一列

    });
    </script>

    如有侵权,请联系
  • 相关阅读:
    Bzoj1072--Scoi2007排列perm
    Bzoj1041--Haoi2008圆上的整点
    Bzoj3932--Cqoi2015任务查询系统
    HDU 1024 Max Sum Plus Plus(DP)
    HDU 1029 Ignatius and the Princess IV
    【noip模拟题】数列
    Hello World
    vue-router 进阶
    vue2.0 源码解读(二)
    vue2.0 源码解读(一)
  • 原文地址:https://www.cnblogs.com/liqiong-web/p/javascript--jquery.html
Copyright © 2011-2022 走看看