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刚加载完时，为表单元素绑定事件并立即出发该事件即可解决

查看全文

相关阅读:
[转]mysql视图学习总结
 [转]mysql索引详解
 mysql索引的操作
 [转]mysql的约束
 mysql表的操作
 【转】mysql的数据类型
 java泛型
 java 8新特性
 Dubbo有意思的特性介绍
 dubbo + zookeeper

原文地址：https://www.cnblogs.com/cimuly/p/7163423.html