zoukankan      html  css  js  c++  java
  • 第五章(jQuery对表单、表格的操作及更多应用)(5.2 表格应用)

    5.2.1 表格变色

    HTML

    <style type="text/css">
            table        { border:0;border-collapse:collapse;}
            td    { font:normal 12px/17px Arial;padding:2px;width:100px;}
            th            { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
            .even        { background:#FFF38F;}  /* 偶数行样式*/
            .odd        { background:#FFFFEE;}  /* 奇数行样式*/
            .selected        { background:#FF6500;color:#fff;}
    </style>
    </head>
    <body>
        <table>
            <thead>
                <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
            </thead>
            <tbody>
                <tr><td>张山</td><td></td><td>浙江宁波</td></tr>
                <tr><td>李四</td><td></td><td>浙江宁波</td></tr>
                <tr><td>王五</td><td></td><td>浙江宁波</td></tr>
                <tr><td>赵六</td><td></td><td>浙江宁波</td></tr>
                <tr><td>rain</td><td></td><td>浙江宁波</td></tr>
                <tr><td>MAXMAN</td><td></td><td>浙江宁波</td></tr>
            </tbody>
        </table>
    <script type="text/javascript">
    
    </script>
    </body>

    1 普通的隔行变色

    首先定义2个样式:

    .even        { background:#FFF38F;}  /* 偶数行样式*/
    .odd        { background:#FFFFEE;}  /* 奇数行样式*/

    然后选择表格奇数和偶数分别添加样式

    $(function(){
        $("tr:odd").addClass("odd");   /*给奇数行添加样式*/
        $("tr:even").addClass("even");   /*给偶数行添加样式*/
    })

    上述代码是将表头算进去的,如果需要排除表头,可以修改选择符

    $(function(){
        $("tbody>tr:odd").addClass("odd");   /*给奇数行添加样式*/
        $("tbody>tr:even").addClass("even");   /*给偶数行添加样式*/
    })

    如果需要将某行变为高亮显示,可以使用 contains 选择器实现

    $("tr:contains('王五')").addClass("selected");
    

     2 单选框控制表格行高亮

    在第一列前加上一列单选框

    当单击某一行后,此行被选中高亮显示,并且单选框被选中,步骤:

    ① 为表格行添加单击行为

    ② 给单击的当前行添加高亮样式,然后将它的兄弟行的高亮样式去掉,最后将当前行里的单选框设置为选中

    $('tbody>tr').click(function(){
        $(this)
            .addClass('selected')
            .siblings().removeClass('selected')
            .end()
            .find(':radio').attr('checked',true);
    })

    使用end() 方法,当前对象是$(this),当进行 addClass() 操作时,对象未发生变化,当执行 siblings().removeClass()操作时,对象已经变味 $(this).siblings(),因此后面的操作都是针对这个对象的,如果需要重新返回到 $(this) 对象,就可以使用 end() 方法

    .find(':radio').attr('checked',true);
    //操作就是:
    $(this).find(':radio').attr('checked',true);
    //而不是:
    $(this).siblings().find(':radio').attr('checked',true);
    //另外,初始化表格时候,如果默认已经有单选框被选中,那么也需要处理,代码如下
    $('table :radio:checked').parent().parent().addClass('selected');

    $('table :radio:checked').parent().parent().addClass('selected');
    //是通过 parent() 方法逐步向父节点获取响应的元素,也可以使用 parents() 方法直接获取
    
    $('table :radio:checked').parents("tr").addClass("selected");

    如果通过 has 也可以进一步简化,表示含有选中的单选框的 <tr> 行将被高亮显示

    $('<tbody>tr:has(:chcked)').addClass('selected');

    完整:

    <script type="text/javascript">
        $(function(){
            $("tbody>tr:odd").addClass("odd"); 
            $("tbody>tr:even").addClass("even"); 
            $('tbody>tr').click(function() {
                if ($(this).hasClass('selected')) {
                    $(this)
                        .removeClass('selected')
                        .find(':checkbox').attr('checked',false);
                }else{
                    $(this)
                        .addClass('selected')
                        .find(':checkbox').attr('checked',true);
                }
            });
    
            $('table :checkbox:checked').parents("tr").addClass('selected');
      })
    </script>

    3 复选框控制表格行高亮

    复选框控制表格与单选框不同,复选框能选择多行变色,并没有限制选择的个数,当单击某行时,如果已经高亮了,则移除高亮样式并去掉当前行复选框的选择状态,如果还没有高亮,则添加高亮样式并将当前行的复选框选中。

        <table>
            <thead>
                <tr><th></th><th>姓名</th><th>性别</th><th>暂住地</th></tr>
            </thead>
            <tbody>
                <tr><td><input type="checkbox" name="choice" value=""/></td>
                    <td>张山</td><td></td><td>浙江宁波</td></tr>
                <tr><td><input type="checkbox" name="choice" value="" /></td>
                    <td>李四</td><td></td><td>浙江宁波</td></tr>
                <tr><td><input type="checkbox" name="choice" value="" checked='checked' /></td>
                    <td>王五</td><td></td><td>浙江宁波</td></tr>
                <tr><td><input type="checkbox" name="choice" value="" /></td>
                    <td>赵六</td><td></td><td>浙江宁波</td></tr>
                <tr><td><input type="checkbox" name="choice" value="" /></td>
                    <td>rain</td><td></td><td>浙江宁波</td></tr>
                <tr><td><input type="checkbox" name="choice" value="" /></td>
                    <td>MAXMAN</td><td></td><td>浙江宁波</td></tr>
            </tbody>
        </table>

    判断是否已经高亮,可以使用hasClass() 方法完成

    <script type="text/javascript">
    $(function(){
        $("tbody>tr:odd").addClass("odd");
        $("tbody>tr:even").addClass("even");
        $('tbody>tr').click(function(){
            if($(this).hasClass('selected')){
                $(this)
                    .removeClass('selected')
                    .find(':checkbox').attr('checked',false);
            }else{
                $(this)
                    .addClass('selected')
                    .find(':checkbox').attr('checked',true);
            }
        });
        $('table :checkbox:checked').parents("tr").addClass('selected');
    })
    </script>

    在如上设计思路不变的前提下,可以简化为:

    $(function(){
        $("tbody>tr:odd").addClass("odd");
        $("tbody>tr:even").addClass("even");
        $('tbody>tr').click(function(){
            // 判断当前是否选定
            var hasSelected = $(this).hasClass('selected');
            // 如果选中,则移出 selected 类,否则就加上 selected 类
            $(this)[hasSelected?"removeClass":"addClass"]('selected')
                // 查找内容的 checkbox ,设置对应的属性
                .find(':checkbox').attr('checked',!hasSelected);
        });
        $('tbody>tr:has(:checked)').addClass('selected');
      // 当用户刚进去页面时,也要处理已经被选中的表格行
    })

    5.2.2 表格展开关闭

    <style type="text/css">
        table        { border:0;border-collapse:collapse;}
        td    { font:normal 12px/17px Arial;padding:2px;width:100px;}
        th            { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;width:100px;}
        .parent        { background:#FFF38F;cursor:pointer;}  /* 偶数行样式*/
        .odd        { background:#FFFFEE;}  /* 奇数行样式*/
        .selected        { background:#FF6500;color:#fff;}
    </style>
    </head>
    <body>
        <table>
            <thead>
                <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
            </thead>
            <tbody>
                <tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>
                <tr class="child_row_01"><td>张三</td><td></td><td>河北邯郸</td></tr>
                <tr class="child_row_01"><td>张三</td><td></td><td>河北邯郸</td></tr>
    
                <tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr>
                <tr class="child_row_02"><td>张三</td><td></td><td>河北邯郸</td></tr>
                <tr class="child_row_02"><td>张三</td><td></td><td>河北邯郸</td></tr>
    
                <tr class="parent" id="row_03"><td colspan="3">后台设计组</td></tr>
                <tr class="child_row_03"><td>Rain</td><td></td><td>火星来客</td></tr>
                <tr class="child_row_03"><td>MAXMAN</td><td></td><td>火星来客</td></tr>
            </tbody>
        </table>
    </body>

    $(function(){
        $('tr.parent').click(function(){    // 获取所有的父行,绑定事件
            $(this)
                .toggleClass('selected')    // 添加、删除高亮显示
                .siblings('.child_'+this.id).toggle();     //隐藏、显示所有的子行
                
       // siblings() 遍历所有的子元素 }); })

    点击绑定的父元素,会折叠子元素

    5.2.3 表格内容筛选

    <style type="text/css">
        table        { border:0;border-collapse:collapse;}
        div{font:normal 12px/17px Arial;}
        td    { font:normal 12px/17px Arial;padding:2px;width:100px;}
        th            { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;width:100px;}
        .even        { background:#FFF38F;}  /* 偶数行样式*/
        .odd        { background:#FFFFEE;}  /* 奇数行样式*/
        .selected        { background:#FF6500;color:#fff;}
    </style>
    </head>
    <body>
    <table>
        <thead>
            <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
        </thead>
        <tbody>
            <tr><td>张三</td><td></td><td>河北邯郸</td></tr>
            <tr><td>张三</td><td></td><td>河北邯郸</td></tr>
            <tr><td>张三</td><td></td><td>河北邯郸</td></tr>
            <tr><td>王五</td><td></td><td>火星来客</td></tr>
            <tr><td>Rain</td><td></td><td>火星来客</td></tr>
            <tr><td>MAXMAN</td><td></td><td>火星来客</td></tr>
            <tr><td>王五</td><td></td><td>中国南京</td></tr>
            <tr><td>赵四</td><td></td><td>中国南京</td></tr>
            <tr><td>赵四</td><td></td><td>中国南京</td></tr>
        </tbody>
    </table>

    $(function(){
        $("table tbody tr")
            .hide()
            .filter(":contains(五)")   
            .show();
    })

    在表格上添加一个文本框,用于根据用户输入的内容来筛选表格内容,然后为文本框绑定 keyup 事件:

    <body>
    <div>
        <br/>
        筛选
        <input type="" id="filterName" name="">
        <br/><br/>
    </div>
    <table>
    
    <!--在表格上面加一个搜索框-->
    $(function(){
        $("#filterName").keyup(function(){   //keyup 当按钮被松开时触发
            $("table tbody tr").hide()
                               .filter(":contains('"+($(this).val())+"')")
                               .show();
                                // :contains 选择器选取包含指定字符串的元素
                                // filter() 过滤器
        }).keyup();
    })

    为避免刷新页面出现表单元素输入的值还是,但是表格内容已经被刷新的情况,需要在DOM刚加载完时,为表单元素绑定事件并立即出发该事件即可解决

  • 相关阅读:
    Android2.3.7源码结构分析
    【开源推荐】AllJoyn:打造全球物联网的通用开源框架
    Ubuntu12.04安装JDK6
    ubuntu12.04升级后找不到共享目录
    Windows Embedded Compact 7新特性
    Windows Embedded Compact 2013 安装体验
    Windows CE,你妈吗喊你在多核上玩玩
    April Fools Contest 2017 C
    April Fools Contest 2017 B
    April Fools Contest 2017 A
  • 原文地址:https://www.cnblogs.com/cimuly/p/7163423.html
Copyright © 2011-2022 走看看