[原]表格单元格交错着色

【Title】[原]表格单元格交错着色
【Date】2013-04-01
【Abstract】以空间换时间，循环确定所着颜色。
【Keywords】table、color、着色、颜色、四色、算法、jQuery、javascript
【Environment】jQuery
【Author】wintys (wintys@gmail.com) http://wintys.cnblogs.com
【URL】http://www.cnblogs.com/wintys/archive/2013/04/01/color_table_cell.html

 

【Content】:

1、效果

TR0-TD0	TR0-TD1	TR0-TD2	TR0-TD3
TR1-TD0	TR1-TD1	TR1-TD2	TR1-TD3
TR2-TD0	TR2-TD1	TR2-TD2	TR2-TD3
TR3-TD0	TR3-TD1	TR3-TD2	TR3-TD3

2、问题描述

对如下表格中的单元格进行交错着色。表格中HTML标签、内容已定。

    <div id="tablecontainer" align="center">
    <table style="border-collapse:collapse;" cellspacing="0">
         <tbody>
             <tr>
                 <td><a href="http://www.yunyun.com/">TR0-TD0</a></td>
                 <td><a href="http://www.yunyun.com/">TR0-TD1</a></td>
                 <td><a href="http://www.yunyun.com/">TR0-TD2</a></td>
                 <td><a href="http://www.yunyun.com/">TR0-TD3</a></td>
             </tr>
             <tr>
                 <td><a href="http://www.yunyun.com/">TR1-TD0</a></td>
                 <td><a href="http://www.yunyun.com/">TR1-TD1</a></td>
                 <td><a href="http://www.yunyun.com/">TR1-TD2</a></td>
                 <td><a href="http://www.yunyun.com/">TR1-TD3</a></td>
             </tr>
             <tr>
                 <td><a href="http://www.yunyun.com/">TR2-TD0</a></td>
                 <td><a href="http://www.yunyun.com/">TR2-TD1</a></td>
                 <td><a href="http://www.yunyun.com/">TR2-TD2</a></td>
                 <td><a href="http://www.yunyun.com/">TR2-TD3</a></td>
             </tr>
             <tr>
                 <td><a href="http://www.yunyun.com/">TR3-TD0</a></td>
                 <td><a href="http://www.yunyun.com/">TR3-TD1</a></td>
                 <td><a href="http://www.yunyun.com/">TR3-TD2</a></td>
                 <td><a href="http://www.yunyun.com/">TR3-TD3</a></td>
             </tr>
         </tbody>
    </table>
    </div>

3、实现

3.1、CSS

    <style type="text/css">
        .tableitem0 {
            background: none repeat scroll 0 0 #F65314;
            color: #FFFFFF;
        }
        .tableitem1 {
            background: none repeat scroll 0 0 #7CBB00;
            color: #FFFFFF;
        }
        .tableitem2 {
            background: none repeat scroll 0 0 #00A1F1;
            color: #FFFFFF;
        }
        .tableitem3 {
            background: none repeat scroll 0 0 #FFBB00;
            color: #FFFFFF;
        }
        #tablecontainer td {
            padding: 5px;
        }
        .tableitem {
            width: 15%;
        }
        .tableitem a {
            display: block;
            font-size: 18px;
            height: 35px;
            margin: 0 auto;
            padding: 15px 20px;
            text-align: center;
            border-bottom:none;
        }
        .tableitem a:hover, .tableitem a:visited {
            color: #FFFFFF !important;
        }
        .tableitem a:hover, .tableitem a:active{
            opacity: 0.8;
        }
    </style>

3.2、JS代码

    <script type="text/javascript">
        function setTableStyle(){
                $("#tablecontainer tr").each(function(i){//获得所有的tr，进行each循环遍历，并对每个进行操作
                    var tr = $(this);//得到本次循环里的这个tr
                    setTableItemStyle(tr,i%4);//每行四个单元格，四种颜色循环交错着色。
                });
        }
        function setTableItemStyle(tr,base){
                //【重点】：以空间换时间，循环确定所着颜色。
                var tableitem = ["tableitem0","tableitem1","tableitem2","tableitem3","tableitem0","tableitem1","tableitem2"];
                for(var i = 0; i < 4;i ++){
                    var td = tr.children("td").eq(i);
                    var td_a = td.find("a");

                    td.addClass("tableitem");
                    //【重点】：base确定起始颜色，i确定本次需要着色的单元格。
                    td_a.addClass(tableitem[base + i]);
                }
        }
        $(function(){
            setTableStyle();
        });
    </script>