zoukankan      html  css  js  c++  java
  • 实现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的

  • 相关阅读:
    computed计算属性依赖的响应式属性为对象obj时,对象obj中有属性字段【A、B、C】时,对A、B进行了if判断,那么只有A、B变化时,计算属性才更新,否则不更新
    computed计算属性依赖的响应式属性为对象时,只要依赖的属性变化(值同地址不同:变化),即使前后值相同,监听computed计算属性也是在变化
    S7-200SMART与S7-1500通信
    STM32F103+OLED绘制曲线
    两台S7-300PLC之间的PROFIBUS-DP主从通信示例
    VBScript连接mysql数据库
    mysql数据库基础知识--入门必看
    小白版windows下mysql配置
    mysql5.7.12直接解压安装过程
    西门子S7-200SMART 指针
  • 原文地址:https://www.cnblogs.com/shenming/p/3527835.html
Copyright © 2011-2022 走看看