文档章节

表格跨行时隔行变色

清山博客
 清山博客
发布于 2016/07/15 19:59
字数 278
阅读 1
收藏 0

效果图:


代码:

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


本文转载自:http://blog.csdn.net/a497785609/article/details/9834491

清山博客
粉丝 3
博文 142
码字总数 30397
作品 0
广州
私信 提问
简单的css js控制table隔行变色

(1)用expression 鼠标滑过变色: <style type="text/css"> <!-- table { background-color:#000000; cursor:hand; width:100%; } td { onmouseover: expression(onmouseover=function (){t......

qhaiyan
2015/10/14
3.6K
0
Jquery真的不难~第三回 如何改变HTML标签的样式

 对于如何修饰HTML标签,这对于JS来说,可以通过setAttribute来设置标签的属性,通过getAttribute来得到标签的属性,而在JQ中当然也可以实现类似的功能,方法上肯定比JS要简化多了...

mcy247
2017/12/06
0
0
给table添加各行变色,几个table的隔行变色怎么才能不互相影响呢?

想给好几个table添加各行变色 这几个table的css设置相同 但是我发现如果第一个table是奇数行,第二个table有偶数行,那么他们的第一行颜色相同,如果行数奇偶性相同,他们的第一行颜色就相同...

xuli2013
2013/11/20
860
2
list列表序号的实现和渐变色的实现

<#if deviceList ? has_content && deviceList != ""> <#list deviceList as device> 这里是序列号 本来没有实现分页的时候直接用${device_index}就可以实现列表的序列号,但是如果有分页的话......

极限Java之菜鸟
2015/09/02
119
2
css整理

css基本选择器: 1、标记选择器,如 2、类别选择器,使用最广 3、ID选择器 在 HTML 中引入 CSS 的方法: 1,行内样式 (在标签内部编写样式) 2,内嵌式(在head部分编写样式) 3,链接式(引...

祁猛
2016/10/20
32
0

没有更多内容

加载失败,请刷新页面

加载更多

G1 垃圾收集器介绍-转

https://www.cnblogs.com/ASPNET2008/p/6496481.html

Java搬砖工程师
29分钟前
1
0
超高性能 key-value 数据库 Redis-基础数据结构

Redis的魅力 缓存大致可以分为两类:1.一种是应用内缓存,比如Map(简单的数据结构),以及EH Cache(Java第三方库);2.另一种 就是缓存组件,比如Memached,Redis;Redis(remote dictiona...

须臾之余
40分钟前
3
0
Mysql表分区的选择与实践小结

在一些系统中有时某张表会出现百万或者千万的数据量,尽管其中使用了索引,查询速度也不一定会很快。这时候可能就需要通过分库,分表,分区来解决这些性能瓶颈。 一. 选择合适的解决方法 1....

小谜弟
46分钟前
3
0
为 git 添加多个公秘钥

如果想为主机配置多个git设置,设置多个git公、秘钥,只需在生成密钥时指定密钥保持的文件即可,保证保存密钥的文件不同即可。 示例: ssh-keygen -t rsa -C "YOUR_EMAIL@YOUREMAIL.COM" -f...

niithub
47分钟前
2
0
walle-web 2.0安装流水

一、环境安装 VMware Workstation,centos7.6 64位,lnmp1.5 二、安装lnmp1.5 wget http://soft.vpser.net/lnmp/lnmp1.5.tar.gz -cO lnmp1.5.tar.gz && tar zxf lnmp1.5.tar.gz && cd lnmp1......

我心中有猛狗
49分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部