表格跨行时隔行变色

最新推荐文章于 2024-04-02 20:31:25 发布
最新推荐文章于 2024-04-02 20:31:25 发布
阅读量85 收藏
点赞数

效果图：


代码：

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


zzg16888
关注
表格实现跨行变色和跨列变色
xtyxtyxtywq的博客
09-13 500
创建表格
纯css表格table隔行显示不同颜色
baidu_20876831的博客
06-07 9604
方法/步骤1制作简单表格，代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;&lt;/title&gt;&lt;style&gt;table,tr,td,th{padding: 0;margin: 0;}table{width: 100%;bord
实现 表格 隔行变色 案例
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
11-03 1306
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格隔行变色</title> <script src="../jquery.js"></script> <style> table{ width:100%; }
利用html制作隔行变色表格,javascript实现table表格隔行变色的方法
weixin_32809369的博客
06-17 1130
本文实例讲述了javascript实现table表格隔行变色的方法。分享给大家供大家参考。具体实现方法如下：table间隔色function SetTableColor() {var tbl = document.getElementById("tblMain");var trs = tbl.getElementsByTagName("tr");for (var i = 0; i < trs...
JS实现表格跨行变色
hexadecimal_001的博客
04-02 436
表格的跨行换色主要用到了JS的函数以及for循环，今天以表格的增加，删除，隔行换色来给大家演示一下。
表格隔行变色效果
m_0_1_0_1的博客
03-26 492
思路：首先将表格写出，再为其添加js效果。把表头放到thead中，把表身放到tbody中，这样可以区分开来实现效果。始终要遵守事件三要素，获取元素，然后利用循环绑定注册事件。 鼠标经过事件：onmouseover 鼠标离开事件：onmouseout <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-C.
实现表格的隔行变色
11-13
隔行变色使得用户在查看大量数据时能更容易地区分每一行，从而减轻视觉疲劳，提高阅读效率。本文将详细讲解如何实现表格的隔行变色，并提供相关的代码示例。 ### 一、CSS基础 隔行变色主要通过CSS（Cascading ...
javascript实现table表格隔行变色的方法
10-24
在Web开发过程中，经常会遇到需要对表格进行视觉样式上的优化，比如对表格中的行进行隔行变色处理，以此来提高表格的可读性。JavaScript是一种广泛应用于网页动态交互效果的编程语言，它允许开发者对网页元素进行...
jQuery实现的隔行变色功能【案例】
10-17
在实际开发中，结合jQuery实现的隔行变色功能不仅限于列表项，还可以用于表格(`table`)的行(`tr`)等其他HTML元素，从而增强网页的视觉效果和用户体验。由于jQuery的兼容性好、跨浏览器支持强以及社区支持广泛，它在...
【Web前端】【JavaScript】实现表格隔行变色
萌狼蓝天の技术栈
12-30 1618
方法1：原生JavaScript 设置CSS table td{ border:red solid 1px; } .tr1{ color:white; background: black; } .tr2{ color:black; background: white; } .tr2:hover{ ...
HTML系列：n种方式实现隔行变色
云端-公子清
12-09 2608
n种方式实现隔行变色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...
pandas-1.3.5-cp37-cp37m-macosx_10_9_x86_64.zip
最新发布
11-04
pandas whl安装包，对应各个python版本和系统(具体看资源名字)，找准自己对应的下载即可！ 下载后解压出来是已.whl为后缀的安装包，进入终端，直接pip install pandas-xxx.whl即可，非常方便。 再也不用担心pip联网下载网络超时，各种安装不成功的问题。
基于java的大学生兼职信息系统答辩PPT.pptx
11-04
基于java的大学生兼职信息系统答辩PPT.pptx
基于java的乐校园二手书交易管理系统答辩PPT.pptx
11-04
基于java的乐校园二手书交易管理系统答辩PPT.pptx
tornado-6.4-cp38-abi3-musllinux_1_1_i686.whl
11-04
tornado-6.4-cp38-abi3-musllinux_1_1_i686.whl
JavaScript与jQuery实现表格隔行变色与Tab标签页特效
"JavaScript表格隔行变色和Tab标签页特效的示例，包括原生JavaScript和jQuery的实现方法，旨在介绍JavaScript元素遍历、事件响应以及提高代码效率的jQuery库应用。" 在Web开发中，为了提升用户体验，经常会使用一些...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值