【特效】隔行变色

隔行变色太简单了，就是用的CSS3 :nth-child() 选择器，但是实际用时总是忘了怎么写的，也总是记不清哪个是奇数，哪个是偶数啊。这里贴出用法，便于以后查看。

选择奇数：:nth-child(odd)

选择偶数：:nth-child(even)

但是IE8是不支持的，所以用jquery控制：

选择奇数：$(" tr:nth-child(odd)")

选择偶数：$(" tr:nth-child(even)")

 

写了一个demo，朴素效果截图：

html：

<div class="con">

         <h1>隔行变色</h1>

    <h2>分别设置奇数行和偶数行</h2>

         <table class="table_1">

             <tr>

                 <td>第1行</td><td>第1行</td><td>第1行</td>

        </tr>

        <tr>

                 <td>第2行</td><td>第2行</td><td>第2行</td>

        </tr>

        <tr>

                 <td>第1行</td><td>第1行</td><td>第1行</td>

        </tr>

        <tr>

                 <td>第2行</td><td>第2行</td><td>第2行</td>

        </tr>

    </table>

   

    <br><br>   

    <h2>实际往往是写一个默认的背景，然后只设置奇数行或偶数行其中的一个</h2>

         <table class="table_2">

             <tr>

                 <td>第1行</td><td>第1行</td><td>第1行</td>

        </tr>

        <tr>

                 <td>第2行</td><td>第2行</td><td>第2行</td>

        </tr>

        <tr>

                 <td>第1行</td><td>第1行</td><td>第1行</td>

        </tr>

        <tr>

                 <td>第2行</td><td>第2行</td><td>第2行</td>

        </tr>

    </table>

   

    <br><br>   

    <h2>用jquery还能实现隔n行变色</h2>

         <table class="table_3">

             <tr>

                 <td>第1行</td>

        </tr>

        <tr>

                 <td>第2行</td>

        </tr>

        <tr>

                 <td>第3行</td>

        </tr>

        <tr>

                 <td>第4行</td>

        </tr>

        <tr>

                 <td>第5行</td>

        </tr>

        <tr>

                 <td>第6行</td>

        </tr>

        <tr>

                 <td>第7行</td>

        </tr>

        <tr>

                 <td>第8行</td>

        </tr>

        <tr>

                 <td>第9行</td>

        </tr>

    </table>

    <br><br><br> 

</div>

 

css：

.con{ width:1000px; margin:0 auto;}

.con h1{ text-align:center; font-weight:normal;}

h1,h2{ font-weight:normal; color:#0CC;}

ul{ margin:0; padding:0; list-style:none;}

table{ border-collapse:collapse; border-spacing:0; width:100%;}

 

td{ border:1px solid #ccc; text-align:center; height:30px;}

 

.table_1 tr:nth-child(odd) td{ background:#f9c;}/*奇数行：粉色*/

.table_1 tr:nth-child(even) td{ background:#ffc;}/*偶数行：黄色*/

 

.table_2 td,.table_3 td{ background:#c5e9f8;}/*正常：蓝色*/

.table_2 tr:nth-child(even) td{ background:#ffc;}/*偶数行：黄色*

 

js：

$(document).ready(function(){

//IE8不支持nth-child选择器，故用js写

         $(".table_1 tr:nth-child(odd) td").css("background","#f9c");

         $(".table_1 tr:nth-child(even) td").css("background","#ffc");

         $(".table_2 tr:nth-child(even) td").css("background","#ffc");

        

//隔n行变色

         $(".table_3 tr:nth-child(3n) td").css("background","#ffc");  

});

 

效果预览：http://www.gbtags.com/gb/rtreplayerpreview-standalone/2856.htm

源码下载：http://pan.baidu.com/s/1qYIgCZ6

 

转载于:https://www.cnblogs.com/xiaoxianweb/p/5509402.html