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

    效果图:


    代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>表格跨行时隔行变色</title>
    </head>
    <style type="text/css">
        td
        {
            border: 1px solid;
             100px;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var i = 0, j = 0, k = 0;
            $("#tableShow tr").each(function (n) {
                if ($(this).find("td").size() == 4) {
                    j = $(this).find("td:eq(0)").attr("rowspan");
                };
                i++;
                if (k % 2 == 0 ) {
                    $(this).css("backgroundColor", "yellow")
                };
                if (i == j) {
                    i = 0;
                    k++;
                };
    
            });
        })
    </script>
    <body>
        <table id="tableShow" style="border: 1px solid">
            <!--第一行-->
            <tr>
                <td rowspan="3">
                    aaa
                </td>
                <td rowspan="3">
                    bbb
                </td>
                <td>
                    ccc
                </td>
                <td>
                    ddd
                </td>
            </tr>
            <tr>
                <td>
                    ee
                </td>
                <td>
                    ff
                </td>
            </tr>
            <tr>
                <td>
                    gg
                </td>
                <td>
                    hh
                </td>
            </tr>
            <!--第二行-->
            <tr>
                <td rowspan="3">
                    aaa
                </td>
                <td rowspan="3">
                    bbb
                </td>
                <td>
                    ccc
                </td>
                <td>
                    ddd
                </td>
            </tr>
            <tr>
                <td>
                    ee
                </td>
                <td>
                    ff
                </td>
            </tr>
            <tr>
                <td>
                    gg
                </td>
                <td>
                    hh
                </td>
            </tr>
            <!--第三行-->
            <tr>
                <td rowspan="3">
                    aaa
                </td>
                <td rowspan="3">
                    bbb
                </td>
                <td>
                    ccc
                </td>
                <td>
                    ddd
                </td>
            </tr>
            <tr>
                <td>
                    ee
                </td>
                <td>
                    ff
                </td>
            </tr>
            <tr>
                <td>
                    gg
                </td>
                <td>
                    hh
                </td>
            </tr>
            <!--第四行-->
            <tr>
                <td rowspan="3">
                    aaa
                </td>
                <td rowspan="3">
                    bbb
                </td>
                <td>
                    ccc
                </td>
                <td>
                    ddd
                </td>
            </tr>
            <tr>
                <td>
                    ee
                </td>
                <td>
                    ff
                </td>
            </tr>
            <tr>
                <td>
                    gg
                </td>
                <td>
                    hh
                </td>
            </tr>
        </table>
    </body>
    </html>
    


  • 相关阅读:
    一个屌丝程序猿的人生(七十二)
    一个屌丝程序猿的人生(七十一)
    一个屌丝程序猿的人生(七十)
    一个屌丝程序猿的人生(六十九)
    一个屌丝程序猿的人生(六十八)
    一个屌丝程序猿的人生(六十七)
    Target-Action回调模式
    KVC & KVO
    ARC内存管理机制详解
    Objective-C中把URL请求的参数转换为字典
  • 原文地址:https://www.cnblogs.com/zhangqs008/p/3618426.html
Copyright © 2011-2022 走看看