• 表格跨行时隔行变色


    效果图:


    代码:

    <!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>
    


  • 相关阅读:
    Handler机制来处理子线程去更新UI线程控件
    获得某月份的天数
    listview选中没有效果
    kali或其他系统,虚拟机中不能加载镜像
    tomcat开启多个端口
    kali自定义分辨率
    Redis 安装手册
    bash检查centos服务器运行状态
    关于利用RD client远程电脑,和输入法的一些问题
    centOS下 MYSQL基本操作
  • 原文地址:https://www.cnblogs.com/zhangqs008/p/3618426.html
Copyright © 2020-2023  润新知