文档章节

表格跨行时隔行变色

清山博客
 清山博客
发布于 2016/07/15 20:01
字数 278
阅读 2
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

取变量的地址赋值给另一个变量,C通过,C++编译出错

取变量的地址赋值给另一个变量,C通过。正常运行,C++编译出错。 代码如下: #include <stdio.h>int main(int argc, char *argv[]){int x = 3;int *p = &x;int y = p;/*c ...

SamXIAO
42分钟前
1
0
利用隐写术实施攻击

尽管隐写术是一种低频攻击途径,但网络犯罪分子已经开始利用它结合社交媒体的普遍性和快速传播性来传递恶意有效负载。 低调但有效的隐写技术虽然是旧把戏,但将代码隐藏在看似正常的图像中,...

Linux就该这么学
42分钟前
2
0
YII2的乐观锁和悲观锁

乐观锁与悲观锁¶ Web应用往往面临多用户环境,这种情况下的并发写入控制, 几乎成为每个开发人员都必须掌握的一项技能。 在并发环境下,有可能会出现脏读(Dirty Read)、不可重复读(Unrep...

echojson
49分钟前
2
0
UCOS线程切换原理

黑客画家
54分钟前
2
0
最牛Java架构师进阶路线(年薪80W)

1、源码分析专题 详细介绍源码中所用到的经典设计思想,看看大牛是如何写代码的,提升技术审美、提高核心竞争力。 帮助大家寻找分析源码的切入点,在思想上来一次巨大的升华。知其然,并知其...

别打我会飞
55分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部