表格跨行时隔行变色

简介:

效果图:


代码:

<!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;
        width: 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>


目录
相关文章
|
关系型数据库 MySQL API
|
机器学习/深度学习 网络协议 vr&ar
proteus仿真软件中芯片的命名规则与封装方法(详细版)
proteus仿真软件中芯片的命名规则与封装方法(详细版)
1673 0
|
存储 安全 网络协议
阿里云SSL数字证书原理、使用、申请流程及部署方式
本文带您了解阿里云数字证书的基本原理、使用、申请流程及部署方式
|
6月前
|
数据采集 运维 数据可视化
别再靠拍脑袋了!搞懂数据治理框架,企业才有未来
别再靠拍脑袋了!搞懂数据治理框架,企业才有未来
243 11
|
7月前
|
存储 消息中间件 Kafka
基于 Flink 的中国电信星海时空数据多引擎实时改造
本文整理自中国电信集团大数据架构师李新虎老师在Flink Forward Asia 2024的分享,围绕星海时空智能系统展开,涵盖四个核心部分:时空数据现状、实时场景多引擎化、典型应用及未来展望。系统日处理8000亿条数据,具备亚米级定位能力,通过Flink多引擎架构解决数据膨胀与响应时效等问题,优化资源利用并提升计算效率。应用场景包括运动状态识别、个体行为分析和群智感知,未来将推进湖仓一体改造与三维时空服务体系建设,助力数字化转型与智慧城市建设。
810 3
基于 Flink 的中国电信星海时空数据多引擎实时改造
|
8月前
|
存储 运维 监控
深度体验阿里云操作系统控制台
阿里云操作系统控制台是管理云服务的卓越工具,界面简洁直观,适合新手快速上手。它提供全面的资源管理功能,涵盖计算、存储和网络资源,极大提升管理效率。实时监控功能确保用户能及时发现并处理问题,保障业务稳定运行。平台还支持扩展组件管理和订阅功能,帮助用户优化Linux服务器环境。通过创建ECS实例并安装SysOM和OS Copilot组件,用户可以体验到便捷的运维管理和智能助手功能,显著提高操作效率。系统诊断和热点分析等功能进一步增强了平台的实用性,助力用户高效管理云资源。
479 1
|
人工智能 监控 供应链
智能电网:能源分配与管理的未来
【10月更文挑战第23天】智能电网是基于先进通信和信息技术的新型电力系统,通过自动化、互联互通和灵活管理,实现能源的智能化分配与管理。本文探讨了智能电网的定义、特点、能源管理革新及其未来发展趋势,展示了其在提升能源效率、促进可再生能源发展和增强电力系统稳定性方面的显著成效。
|
SQL 分布式计算 DataWorks
DataWorks产品使用合集之如何对多个表进行历史数据的回刷(即补数据)
DataWorks作为一站式的数据开发与治理平台,提供了从数据采集、清洗、开发、调度、服务化、质量监控到安全管理的全套解决方案,帮助企业构建高效、规范、安全的大数据处理体系。以下是对DataWorks产品使用合集的概述,涵盖数据处理的各个环节。
331 1
|
前端开发 数据库 UED
无感token实现方案
无感token实现方案
|
JavaScript Java Linux
逆向神器Frida
逆向神器Frida
383 0