文档章节

表格跨行时隔行变色

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

没有更多内容

加载失败,请刷新页面

加载更多

Linux iptables之mangle表使用案例

mangle表的用途 mangle表的主要功能是根据规则修改数据包的一些标志位,以便其他规则或程序可以利用这种标志对数据包进行过滤或策略路由。 mangel表使用示例 示例1-策略路由1 内网的客户机通...

月下狼
今天
3
0
OSChina 周日乱弹 —— 兼职我想去学学布偶戏

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @clouddyy : 《火炎 - 女王蜂》 《火炎 - 女王蜂》 手机党少年们想听歌,请使劲儿戳(这里) @小鱼丁 :还在睡觉突然接到一个小哥哥电话“x...

小小编辑
今天
121
7
租房软件隐私保护如同虚设

近日,苏州市民赵先生向江苏新闻广播新闻热线025-84658888反映,他在“安居客”手机应用软件上浏览二手房信息,并且使用该软件自动生成的虚拟号码向当地一家中介公司进行咨询。可电话刚挂不久...

linux-tao
今天
4
0
分布式项目(五)iot-pgsql

书接上回,在Mapping server中,我们已经把数据都整理好了,现在利用postgresql存储历史数据。 iot-pgsql 构建iot-pgsql模块,这里我们写数据库为了性能考虑不在使用mybatis,换成spring jd...

lelinked
今天
6
0
一文分析java基础面试题中易出错考点

前言 这篇文章主要针对的是笔试题中出现的通过查看代码执行结果选择正确答案题材。 正式进入题目内容: 1、(单选题)下面代码的输出结果是什么? public class Base { private Strin...

一看就喷亏的小猿
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部