• 实现table样式的设定


    1.实现效果:在项目中,一些table都要设置样式,为了样式的美观,表头是一个样式,奇数行一个样式,偶数行一个样式。当鼠标经过的时候颜色变化,鼠标离开时颜色恢复,这就有了这样方法。

    2.实现过程:

    js文件xs_table_css.js

    //****************************************************************************************
    //作者:轻狂书生
    //博客地址:http://www.cnblogs.com/xiaoshuai1992
    //create: 2014/1/17
    //功能:实现table颜色变化
    //使用方法:引用jquery,设置table的样式为变量xs_table_css的值
    //*****************************************************************************************
    
    $(document).ready(function () {
        var xs_table_css = "xs_table"; //获取table的css
        var xs_table_th_css = "xs_table_th"; //table 的th样式
        var xs_table_even_css = "xs_table_even"; //table的偶数行css
        var xs_table_odd_css = "xs_table_odd"; //table的奇数行css
        var xs_table_select_css = "xs_table_select"; //table选择行的样式
        var xs_table = "table." + xs_table_css;
        $(xs_table).each(function () {
            $(this).children().children().has("th").addClass(xs_table_th_css); //表头
            var tr_even = $(this).children().children(":even").has("td"); //数据偶数行
            var tr_odd = $(this).children().children(":odd").has("td"); //数据奇数行
            tr_even.addClass(xs_table_even_css);
            tr_odd.addClass(xs_table_odd_css);
            tr_even.mouseover(function () {
                $(this).removeClass(xs_table_even_css);
                $(this).addClass(xs_table_select_css);
            });
            tr_even.mouseout(function () {
                $(this).removeClass(xs_table_select_css);
                $(this).addClass(xs_table_even_css);
            });
            tr_odd.mouseover(function () {
                $(this).removeClass(xs_table_odd_css);
                $(this).addClass(xs_table_select_css);
            });
            tr_odd.mouseout(function () {
                $(this).removeClass(xs_table_select_css);
                $(this).addClass(xs_table_odd_css);
            });
    
        });
    
    });
    复制代码

    样式文件xs_table.css

    复制代码
    .xs_table
    {
    }
    .xs_table_th
    {
        height: 50px;
        background-color: #C0C0C0;
    }
    .xs_table_even
    {
        height: 50px;
        background-color: #F0F0F0;
    }
    
    .xs_table_odd
    {
        height: 50px;
        background-color: #FFFFFF;
    }
    .xs_table_select
    {
        height: 50px;
        background-color: #D9D9D9;
    }
    复制代码

    页面文件xs_table_css.htm

    复制代码
    <!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>
        <link href="xs_table.css" rel="stylesheet" type="text/css" />
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" type="text/javascript">
        </script>
        <script src="xs_table_css.js" type="text/javascript"></script>
    </head>
    <body>
    <table class="xs_table" width="800px">
    <tbody >
    <tr><th>headone</th><th>headTwo</th></tr>
    <tr><td>第一行</td><td>111111111</td></tr>
    <tr><td>第二行</td><td>222222222</td></tr>
    <tr><td>第三行</td><td>333333333</td></tr>
    <tr><td>第四行</td><td>444444444</td></tr>
    </tbody>
    </table>
    <br />
    <br />
    <table class="xs_table" width="800px">
    <tr><th>headone</th><th>headTwo</th></tr>
    <tr><td>第一行</td><td>111111111</td></tr>
    <tr><td>第二行</td><td>222222222</td></tr>
    <tr><td>第三行</td><td>333333333</td></tr>
    <tr><td>第四行</td><td>444444444</td></tr>
    </table>
    </body>
    </html>
    复制代码

    3:方法说明

      (1)mouseover和mouseout要先移除上次的css,不然会出现样式叠加

      (2)找tr时注意tbody,虽然页面上没有tbody标签,但是默认会有这个子元素

      (3)奇偶行要去除th,只找td的

  • 相关阅读:
    Swift-基础语法之变量&常量&元组
    Swift
    安装MySQL
    LNMP 简介
    LNMP
    Django 定义数据模型
    Django 添加应用
    Django 创建第一个项目
    Django 安装
    Django 简介
  • 原文地址:https://www.cnblogs.com/shenming/p/3527835.html
Copyright © 2020-2023  润新知