• 定义表格的指定列的属性


    首先我们先看看css3中的实现方式:

    1.1 CSS3中表格行的选择:

    css3中有很多很不错的伪类,比如以前很头疼的表格隔行换色问题,只需要用

    table tr:nth-child(odd){background:#CCC}/*定义奇数行的背景色为灰*/
    table tr:nth-child(even){background:#F00}/*定义偶数行的背景色为红*/

    另外,css3中,伪类可以连写,比如我们要设定鼠标hover时,奇数行背景色变成蓝色,可以这样写

    table tr:hover:nth-child(odd){background:#00F}/*鼠标滑过时,第奇数行背景色变成蓝*/

    除了定义奇偶性,我们也可以使用css3强大的nth-child()选择器,定义指定行:

    table tr:nth-child(2){background:orange}/*第2行定义为桔色*/

    是不是非常简单?
    查看实例(需要在支持css3属性的浏览器中才能看到效果)

    1.2 CSS3中表格列的选择:

    列的定义在css3中同样非常简单,唯一不同的不是定义tr而是定义td

    table td:nth-child(odd){background:#CCC}/*定义奇数列的背景色为灰*/
    table td:nth-child(4){background:#F00}/*定义第4列背景色为红*/

    查看实例(需要在支持css3属性的浏览器中才能看到效果)
    =================华丽的分割线=====================================
    虽然CSS3的强大选择器相当牛B,可是万恶的IE6不支持,不光IE6不支持,连IE8都不支持。所以在实际应用中,还是要寻求javascript还解决。下面来讲下在jquery中的解决方法:

    2.1 jQuery中表格行的选择:

    $("table tr:even").css("background","#CCC");/*定义奇数行的背景色为灰*/
    $("table tr:eq(3)").css("background","#F00");/*定义第4行的背景色为红*/

    查看实例(这回兼容该死的IE6了)

    2.2 jQuery中表格列的选择:

    javascript里对列的选择要麻烦一点,没有像CSS3里那样现成的定义。可以试下jQuery里的table td:even,效果是与css3里的table td:nth-child(even)不一样的。但我们知道原理也不难。
    首先要知道表格的总列数,那么第1列就是td的序数除以列总数余数为0的(jquery数数从0数起的)。

    var tdNum = $("table tr:first td").length;//得到表格的列数,即为第一个tr里td的个数。
        $("table td").each(function(i){
            if (i%tdNum == 0)//当前td的序数除以总列数余数为0表示第1列
            {
                $(this).css("background","#F00");
            }
        });

    查看实例
    但是还有个问题我至今还没想到好的兼容解决方法。就是在表格里有colspan值的时候,这时候实际td数会少于正常表格。用css3可以很好地定义,但jquery貌似不能

    aliyun活动 https://www.aliyun.com/acts/limit-buy?userCode=re2o7acl
  • 相关阅读:
    排序算法之——冒泡排序优化
    Linux程序在预处理、编译、汇编、链接、运行步骤的作用
    理解可变参数的原理
    对虚函数、虚表的认识
    成员函数的重载、覆盖、隐藏
    centOS7-mariadb的安装
    centOS7-本地源配置
    vmware中桥接、NET、仅主机模式详解
    XXX系统项目目标文档课堂讨论
    做生活的有心人——xxx系统第一阶段总结
  • 原文地址:https://www.cnblogs.com/wangbin/p/2195254.html
Copyright © 2020-2023  润新知