zoukankan      html  css  js  c++  java
  • jQuery中将表格以交替颜色显示

    非常简单,只需要在页面中增加:

    样式:

    .odd{
        background-color: #9F9;
    }
    .even{
        background-color: #FFC;
    }

    th{background:#B5CBE6; color:#039; line-height:20px; height:30px}

    tr.over td{
        background-color: #3FF;
    } /*这个将是鼠标高亮行的背景色*/

    然后引入js定义即可:

    $(document).ready(function()
    {
        //标题显示
        //在jQuery1.3.1中有问题,下面的奇偶设定会覆盖,使用1.3.1a则没有问题

        $('th').parent().addClass('tablehead');
        //奇偶交替颜色显示
        $('tr:not([th]):odd').addClass('odd');
        $('tr:not([th]):even').addClass('even');
        //着重显示
        $('td:contains("001")').addClass('highlight');

    //鼠标
        $("tr").mouseover(function(){ //如果鼠标移到class为stripe_tb的表格的tr上时,执行函数
         $(this).addClass("over");}).mouseout(function(){ //给这行添加class值为over,并且当鼠标一出该行时执行函数
         $(this).removeClass("over");}) //移除该行的class


    });

    页面中的表格不需要任何特殊设置!

    //在其他版本中,不使用下面这行,而是直接定义CSS:

    th{background:#B5CBE6; color:#039; line-height:20px; height:30px}

    然后:

    $(document).ready(function()
    {
        //标题显示
        //奇偶交替颜色显示
        $('tr:not([th]):odd').addClass('odd');
        $('tr:not([th]):even').addClass('even');
        //着重显示
        $('td:contains("001")').addClass('highlight');

    //鼠标
        $("tr").mouseover(function(){ //如果鼠标移到class为stripe_tb的表格的tr上时,执行函数
         $(this).addClass("over");}).mouseout(function(){ //给这行添加class值为over,并且当鼠标一出该行时执行函数
         $(this).removeClass("over");}) //移除该行的class


    });

  • 相关阅读:
    乱码解决
    Collection接口
    YTU EDG Vince Day Training -- 训练赛赛后总结
    Codeforces Round #751 (Div. 2) A. Two Subsequences
    Codeforces Round #750 (Div. 2) C. Grandma Capa Knits a Scarf
    Codeforces Round #745 (Div. 2) B. Diameter of Graph
    Codeforces Round #745 (Div. 2) A. CQXYM Count Permutations
    ytuoj-3328 快速幂
    Codeforces Round #746 (Div. 2) C. Bakry and Partitioning
    Codeforces Round #747 (Div. 2) B. Special Numbers
  • 原文地址:https://www.cnblogs.com/GarfieldTom/p/1498640.html
Copyright © 2011-2022 走看看