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>
    


  • 相关阅读:
    Java类型转换
    Java数据类型
    Java运行机制-简单理解
    Dos基础命令
    MarkDown
    MSP430 ADC12模块(转)
    解决拷贝中文注释到KEIL4.6中呈现乱码的问题
    ADS1.2 DEBUG调试时提示:erro starting external process,Process error code 87(0x57)
    MDK4.6提示不能找到库
    在JLINK4.12的安装目录下没有LPC2214.jflash文件的解决办法
  • 原文地址:https://www.cnblogs.com/zhangqs008/p/3618426.html
Copyright © 2011-2022 走看看