jQuery对表单、表格的操作及更多应用

文章头图

学习了jQuery的基本语法，发现jQuery的选择器非常强大，还解决了浏览器的兼容问题，迫不及待想要尝试一下，于是对着书本的案例实现了一些小案例，虽然是小案例，但是对我来说也不容易，花了好多时间才调试通过。意识到知识不去整理，很快就忘记，加上本次学习的都是一些比较常用的案例，于是想记录下来，方便以后直接拷贝~~

1、单行文本框添加获取、失去焦点样式事件

对文本框的操作，包括获取焦点时候输入框变色、失去焦点时恢复原来的颜色。需要注意的是：input的边框必须设置为2px，textarea的边框必须设置为1px，这样才能防止它们获取和失去焦点时，产生“抖动”现象。具体请看下面代码，大家可以新建一个html文件，随意改动一下input和textarea的边框看看效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本框获取和失去焦点事件</title>
    <style type="text/css">
        body fieldset{
            width: 400px;
            margin: 0 auto; /*垂直居中*/
        }
        body input{
            width: 200px;
            height: 28px;
        }
        body div{
            margin: 15px 0;
        }
        body textarea{
            vertical-align: middle;
            width: 400px;
            height: 100px;
        }

        .bor{
            outline: none;
            border:2px solid red; /*input的边框大小设置为2px，防止focus和blur时组件的大小发生改变，产生“抖动”。*/
        }
        .bor2{
            outline: none;
            border:1px solid red; /*textarea的边框大小设置为2px，防止focus和blur时组件的大小发生改变，产生“抖动”*/。
        }
    </style>
</head>


<body>
    <form action="#" method="POST" id="regForm">
        <fieldset>
            <legend>个人基本信息</legend>
            <div>
                <label for="userName">名称：</label>
                <input type="text" name="用户名" id="userName">
            </div>
            <div>
                <label for="psw">密码：</label>
                <input type="password" name="密码" id="psw">
            </div>
            <div>
                <label for="msg">详细信息:</label>
                <textarea id="msg"></textarea>
            </div>
        </fieldset>
    </form>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){  //单独input设置样式，防止边框大小产生的“抖动”！
            $("input").focus(function(){
                $(this).addClass("bor");
            }).blur(function(){
                $(this).removeClass("bor");
            });

            $("textarea").focus(function(){ //单独textarea设置样式，防止边框大小产生的“抖动”！
                $(this).addClass("bor2");
            }).blur(function(){
                $(this).removeClass("bor2");
            });
        });
    </script>

</body>
</html>

运行效果如下：

文本框获取和失去焦点样式控制

2、多行文本框高度和滚动条的操作

对多行文本框添加事件，包括调整文本框的高度、操作滚动条，加上过度动画等。具体请看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多行文本框高度变化</title>
    <style type="text/css">
        span{
            display: inline-block;
            width: 60px;
            height: 40px;
            background: #ccc;
            font-size: 12px;
            color: white;
            line-height: 40px;
            text-align: center;
            cursor: pointer; /*设置指针为手型，使其像可点击的按钮*/
        }
        span:hover{  /*鼠标经过，背景变为橙色*/
            background-color: orange; 
        }

        form{
            width: 400px;
            margin: 0 auto;
        }

        textarea{
            overflow: visible;
        }
    </style>
</head>
<body>
    <form action="">
        <div class="msg_caption">
            <span class="bigger">增加高度</span>
            <span class="smaller">减少高度</span>
            <span class="up">滚动条上</span>
            <span class="down">滚动条下</span>
        </div>
        <div>
            <label for="comment">文本框的高度（范围50px-500px，每次调整50px）</label>
            <textarea id="comment" name="" cols="56" rows="8"></textarea>
        </div>
        
    </form>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            var $comment=$('#comment');//获取评论框
            var heigh="";
            $('.bigger').click(function(){  //给“放大按钮”绑定事件
                if (!$comment.is(":animated")){ //确保当前没有动画正在执行，防止动画队列累积。
                    if ($comment.height()<500) {
                        // $comment.height($comment.height() - 50);没有动画的代码
                        $comment.animate({height:"+=50"},300); //设置动画。让过度更自然
                    }
                }

            }); 

            $('.smaller').click(function(){ //给“缩小按钮”绑定事件
                if (!$comment.is(":animated")) { //确保当前没有动画正在执行，防止动画队列累积。
                    if ($comment.height()>50) {
                        // $comment.height($comment.height() - 50);没有动画的代码
                        $comment.animate({height:"-=50"},300); //设置动画。让过度更自然
                    }
                }

            }); 


            $('.up').click(function(){ //给“向上滚动”绑定事件
                if (!$comment.is(":animated")) { //确保当前没有动画正在执行，防止动画队列累积。
                    // $comment.height($scrollTop.height() - 50);没有动画的代码
                    $comment.animate({scrollTop:"-=50"},300); //设置动画。让过度更自然
                }

            }); 

            $('.down').click(function(){ //给“向下滚动”绑定事件
                if (!$comment.is(":animated")) { //确保当前没有动画正在执行，防止动画队列累积。
                    // $comment.height($scrollTop.height() + 50);没有动画的代码
                    $comment.animate({scrollTop:"+=50"},300); //设置动画。让过度更自然
                }

            }); 
        });
    </script>
</body>
</html>

运行效果如下：

image.png

3、复选框的基本操作（全选/全不选、反选、联动）

对复选框的操作，包括：全选/全不选、反选、联动（全选按钮的状态会跟随选项组的变化而变化，选项组中有一个没有选中，全选按钮都不会选中。反过来也一样，选项组全部选中时，全选按钮会自动变为选中状态）。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选框基本操作</title>
    <style type="text/css">
        form{
            width: 600px;
            margin: 0 auto;
        }
        form div{
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <form>
        <h3>你爱好的运动是什么？</h3>
            <input type="checkbox" name="items" value="足球"/>足球
            <input type="checkbox" name="items" value="篮球"/>篮球
            <input type="checkbox" name="items" value="羽毛球"/>羽毛球
            <input type="checkbox" name="items" value="棒球"/>棒球
            <span>|</span>
            <input type="checkbox" id="checkAll"/><label for="checkAll">全选/全不选</label>
            <input type="checkbox" id="checkRev"/><label for="checkAll">反选</label>
        <div>
            <input type="button" value="提交" id="send"/>
        </div>
    </form>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript">
        $(function(){ 
            $("#checkAll").click(function(){ //全选/全不选操作
                $('[name=items]:checkbox').prop("checked",this.checked);
            });
    
            $("#checkRev").click(function(){ //反选操作
                $('[name=items]:checkbox').each(function(){
                    $(this).prop("checked",!$(this).prop("checked"));//jQuery写法
                    // this.checked=!this.checked;//JavaScript写法，更加简洁
                });
            });

            $('[name=items]:checkbox').click(function(){  //对复选框组绑定事件
                var flag=true;
                $('[name=items]:checkbox').each(function(){ //遍历每一个名为items的checkbox
                    if(!this.checked){//如果有未选中的
                        flag=false;
                    }
                });
                $('#checkAll').prop('checked',flag);//将全选框设置为“未选中”状态 
            });

            $('#send').click(function(){ //为发送按钮绑定click事件，弹出选中的选项。
                var str="你选中的是:\r\n";
                $('[name=items]:checkbox:checked').each(function(){
                    str += $(this).val()+"\r\n";
                });
                alert(str);
            });

        });


    </script>
</body>
</html>

运行效果：

复选框操作

4、移动下拉框内容（单击移动、全部移动、双击移动）

对下拉框的操作，包括：将选中的内容移动到另一个选项组中、双击某个选项移动到另一个选项组中、全部选项移动到另一个选项组中。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复制下拉框的内容</title>
    <style type="text/css">
        .comWidth{
            width: 400px;
            margin: 0 auto;
        }
        .content{
            float: left;
            margin: 0 auto;
            /*height: 240px;*/
            margin-right: 10px;
            padding:10px 5px;
        }
        #select1{
            width: 140px;
            height: 160px;
            margin-bottom: 10px;
        }
        #select2{
            width: 140px;
            height: 160px;
            margin-bottom: 10px;
        }

        span{
            display: block;
            background: #ccc;
            padding: 2px;
            font-size: 12px;
            cursor: pointer;
            margin-bottom: 5px;
        }

        .tips{
            clear: both;
            color: #f00;
            font-size: 10px;
            text-indent: 5px;
        }
    </style>
</head>
<body>
<div class="comWidth">
    <div class="content">
        <h3>左边：</h3>
        <select multiple id="select1">
            <option value="1">选项1</option>
            <option value="2">选项2</option>
            <option value="3">选项3</option>
            <option value="4">选项4</option>
            <option value="5">选项5</option>
        </select>
        <div>
            <span id="add">>>添加选中内容到右边</span>
            <span id="addAll">>>添加所有内容到右边</span>
        </div>
    </div>
    <div class="content">
        <h3>右边：</h3>
        <select multiple id="select2">
        </select>
        <div>
            <span id="remove">>>移动选中内容到左边</span>
            <span id="removeAll">>>移动所有内容到左边</span>
        </div>
    </div>
    <div class="tips">提示：双击也可以移动选项！</div>
</div>


<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript">
    $(function(){
        $('#add').click(function(){ //将选中的option移动到右边
            var $options = $('#select1 option:selected');
            // var $remove = $options.remove();//append方法自带删除功能，不用remove也行。
            $options.appendTo('#select2');
        });

        $('#addAll').click(function(){ //将全部option移动到右边
            var $options = $('#select1 option');
            // var $remove = $options.remove();//append方法自带删除功能，不用remove也行。
            $options.appendTo('#select2');
        });

        $('#remove').click(function(){ //将全部option移动到左边
            var $options = $('#select2 option:selected');
            // var $remove = $options.remove();//append方法自带删除功能，不用remove也行。
            $options.appendTo('#select1');
        });

        $('#removeAll').click(function(){ //将全部option移动到左边
            var $options = $('#select2 option');
            // var $remove = $options.remove();//append方法自带删除功能，不用remove也行。
            $options.appendTo('#select1');
        });

        $('#select1').dblclick(function(){ //双击将选中option移动到右边
            // var $options = $('option:selected',this);//另一种选中方式
            var $options = $('#select1 option:selected');
            // var $remove = $options.remove();//append方法自带删除功能，不用remove也行。
            $options.appendTo('#select2');
        });


        $('#select2').dblclick(function(){ //双击将选中option移动到左边
            var $options = $('option:selected',this);
            // var $options = $('#select1 option:selected');//另一种选中方式
            // var $remove = $options.remove();//append方法自带删除功能，不用remove也行。
            $options.appendTo('#select1');
        });
    });
</script>
</body>
</html>

运行效果：

移动下拉框的内容

5、表单验证

表单验证包括：对输入内容进行实时检测并给出相应提示、内容不符合要求时阻止表单提交。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <style type="text/css">
        form{
            width: 400px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 10px;
        }

        body div{
            margin-bottom: 10px;
        }

        label{
            display: inline-block;
            text-align: right;
            width: 80px;
        }

        .sub{
            margin-left: 85px;
        }
        h3{
            text-align: center;
        }
    </style>
</head>
<body>
    <h3>表单验证(邮箱没有进行正则表达式验证)</h3>
    <form action="" method="POST">
        <div class="inpt">
            <label for="userName">用户名：</label>
            <input type="text" id="userName" class="required" />
        </div>
        <div class="inpt">
            <label for="email">邮箱：</label>
            <input type="text" id="email" class="required" />
        </div>
        <div class="inpt">
            <label for="personalInfo">个人信息：</label>
            <input type="text" id="personalInfo" />
        </div>
        <div class="sub">
            <input type="submit" id="send" value="提交" />
            <input type="reset" id="res">
        </div>
    </form>

    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("form :input.required").each(function(){
                var $required = $('<strong class="high" style="color:#f00;">*</strong>');//创建元素
                $(this).parent().append($required);//把元素追加到文档中
            });

            $('form :input').blur(function(){ //为表单元素添加失去焦点事件
                var $parent=$(this).parent();
                $parent.find(".formTips").remove();//删除以前的提醒元素
                //验证用户名
                if ($(this).is('#userName')) {
                    if (this.value==""||this.value.length<6) {
                        var errMsg = "请至少输入6位用户名";
                        $parent.append('<span class="formTips onError" style="color:red;font-size:10px;">'+errMsg+'</span>').find('.high').remove();
                    }else {
                        var okMsg='输入正确';
                        $parent.append('<span class="formTips onSuccess" style="color:#333;font-size:10px;">'+okMsg+'</span>').find('.high').remove();
                    }
                }
                //验证邮箱
                if ($(this).is('#email')) {
                    if (this.value=="") {
                        var errMsg = "请输入正确的邮箱地址";
                        $parent.append('<span class="formTips onError" style="color:red;font-size:10px;">'+errMsg+'</span>').find('.high').remove();
                    }else {
                        var okMsg='输入正确';
                        $parent.append('<span class="formTips onSuccess" style="color:#333;font-size:10px;">'+okMsg+'</span>').find('.high').remove();
                    }
                }
            }).keyup(function(){
                $(this).triggerHandler("blur");
            }).focus(function(){
                $(this).triggerHandler("blur");
            });

                //提交事件
                $('#send').click(function(){
                    $('form .required:input').trigger('blur');//触发失去焦点事件
                    var $errNum=$('form .onError').length;
                    if ($errNum>0) {
                        return false;
                    }
                    console.log('aa');
                    alert("已提交！");
                });
        });
    </script>
</body>
</html>

运行效果：

表单验证

6、表格应用

6.1 普通的隔行变色

普通的隔行变色可以，新建两个不同的样式，例如新建两个样式：.even{background:orange;} 和 .odd{background:skyblue;}。然后通过jQuery给表格的奇数行添加一个名为odd的类，给偶数行添加一个名为even的类。这样就可以实现隔行变色效果了。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常规表格隔行高亮</title>
    <style type="text/css">
        table{
            border: 1px solid #ccc;
            width: 400px;
            margin: 0 auto;
        }
        table thead tr{
            background-color: silver;
        }

        .even{
            background-color: orange;
        }

        .odd{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <th>姓名</th>
            <th>性别</th>
            <th>暂住地</th>
        </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>
        </tbody>
    </table>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            $('tbody>tr:odd').addClass('odd');
            $('tbody>tr:even').addClass('even');
        });
    </script>
</body>
</html>

运行效果：

常规隔行高亮

6.2 单选框控制表格行高亮（单行高亮）

单选框控制表格行高亮，主要思路是：

在每个行第一个td前增加一个单选框；
新建一个行的样式（例如：selected{...}），用于区分选中和未选中状态；
给表格每行增加单击事件，单击时给对应行增加样式addClass("selected")，并移除其他行的样式removeClass("selected")；
找到当前行的单选按钮，设置按钮为选中状态prop('checked',true)。
具体请看下方代码（注意：请将radio的name设置为一致的，否则无法实现单选功能）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单选框单选高亮行</title>
    <style type="text/css">
        table{
            border: 1px solid #ccc;
            width: 400px;
            margin: 0 auto;
        }
        table thead tr{
            background-color: silver;
        }

        .even{
            background-color: orange;
        }

        .odd{
            background-color: skyblue;
        }

        .selected{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <th>姓名</th>
            <th>性别</th>
            <th>暂住地</th>
        </thead>
        <tbody>
            <tr>
                <!-- radio如果要单选，请将它们的name设置为一样的 -->
                <td><input checked="" type="radio" name="haha">张三</td> 
                <td>男</td>
                <td>浙江宁波</td>
            </tr>
            <tr>
                <td><input type="radio" name="haha">李四</td>
                <td>女</td>
                <td>山东济南</td>
            </tr>
            <tr>
                <td><input type="radio" name="haha">王五</td>
                <td>男</td>
                <td>湖南长沙</td>
            </tr>
            <tr>
                <td><input type="radio" name="haha">赵六</td>
                <td>女</td>
                <td>浙江温州</td>
            </tr>
            <tr>
                <td><input type="radio" name="haha">Rain</td>
                <td>男</td>
                <td>韩国首尔</td>
            </tr>
        </tbody>
    </table>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            //判断当前行（的radio）是否被选中，如果选中则加上selected类使其变色
            $('tbody>tr:has(:checked)').addClass('selected');
            $('tbody>tr').click(function(){
                $(this)
                .addClass('selected')
                .siblings().removeClass('selected')
                .end()
                .find(':radio').prop('checked',true); //如果要能反复切换选中状态，请使用prop()代替attr()。
              });

             
        });
    </script>
</body>
</html>

运行效果：

单选框选中时列表行高亮

6.3 复选框控制表格行高亮（多行高亮）

复选框可以让选中的表格行高亮，支持多选。思路和单行选择差不多，这里不做过多赘述，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选框选择行并高亮</title>
    <style type="text/css">
        table{
            border: 1px solid #ccc;
            width: 400px;
            margin: 0 auto;
        }
        table thead tr{
            background-color: silver;
        }

        .even{
            background-color: orange;
        }

        .odd{
            background-color: skyblue;
        }

        .selected{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <th>姓名</th>
            <th>性别</th>
            <th>暂住地</th>
        </thead>
        <tbody>
            <tr>
                <!-- checkbox如果要单选，请将它们的name设置为一样的 -->
                <td><input checked type="checkbox" name="haha">张三</td> 
                <td>男</td>
                <td>浙江宁波</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="haha">李四</td>
                <td>女</td>
                <td>山东济南</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="haha">王五</td>
                <td>男</td>
                <td>湖南长沙</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="haha">赵六</td>
                <td>女</td>
                <td>浙江温州</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="haha">Rain</td>
                <td>男</td>
                <td>韩国首尔</td>
            </tr>
        </tbody>
    </table>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            //判断当前行（的checkbox）是否被选中，如果选中则加上selected类使其变色
            $('tbody>tr:has(:checked)').addClass('selected');
            $('tbody>tr').click(function(){
                //判断当前行(tr)是否含有selected类
                var hasSelected = $(this).hasClass('selected');
                //如果选中，则移除selected类,否则就加上selected类
                $(this)[hasSelected?"removeClass":"addClass"]('selected')
                // .find(':checkbox').attr('checked',!hasSelected); //使用attr()设置checked属性，会导致取消选中后无法再次选中，建议使用prop()
                .find(':checkbox').prop('checked',!hasSelected); //查找内部checkedbox，设置对应的属性
              });
        });
    </script>
</body>
</html>

复选框，多行高亮

6.4 表格展开关闭

表格的展开和关闭，主要是对行进行编组，单击组名对应的行，可以展开/折叠对应的子行。主要思路是：

新建对应组，组名对应的行，id设置为row_x,x代表第x组；
子行的类名可以设置为child_row_x这样方便jQuery代码的编写；
通过jQuery给每行添加单击事件，使用toggleClass()函数删除/添加高亮；该函数可以增加或删除控制高亮的类，存在就删除，不存在就添加；
通过siblings()和toggle()隐藏/显示行。siblings()用于选择同组内的子行，然后通过toggle()控制显示和隐藏（隐藏的就设置为显示，显示的就设置为隐藏）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格打开/关闭</title>
    <style type="text/css">
        table{
            border: 1px solid #ccc;
            width: 400px;
            margin: 0 auto;
        }
        table thead tr{
            background-color: silver;
        }

        table tbody>tr{
            background-color: #f0f0f0;
        }

        .even{
            background-color: orange;
        }

        .odd{
            background-color: skyblue;
        }

        .selected{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <th>姓名</th>
            <th>性别</th>
            <th>暂住地</th>
        </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>田七</td><td>男</td><td>浙江宁波</td></tr>
            <tr class="child_row_03"><td>林峰</td><td>女</td><td>浙江杭州</td></tr>
        </tbody>
    </table>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            $('tr.parent').click(function(){
                $(this)
                .toggleClass('selected')//添加/删除高亮
                .siblings('.child_'+this.id).toggle();//隐藏/显示行
            });
        });
    </script>
</body>
</html>

运行效果：

表格行的展开与关闭

6.5 表格内容筛选

表格内容的筛选，主要通过contains()和filter()来实现。主要步骤如下：

首先给输入框绑定keyup事件，隐藏表格的所有“行(tr)”；
通过contains()筛选出用户输入的内容，然后通过filter()筛选出包含对应字符的“行(tr)”；
将第2步筛选出的“行(tr)”显示出来。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格内容筛选</title>
    <style type="text/css">
        table{
            width: 400px;
            border: 1px solid #ccc;
            text-align: center;
        }
        .comWidth{
            width: 400px;
            margin: 0 auto;
            /*border: 1px solid #ccc;*/
            padding: 5px;
            font-size: 14px;
        }

        #search{
            /*display: inline-block;*/
            margin: 5px;
        }

        table thead tr{
            background-color: silver;
        }

        .selected{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="comWidth">
    <label for="search">筛选：</label>
    <input id="search" type="text" name="search">
    <table>
        <thead>
            <th>姓名</th>
            <th>性别</th>
            <th>暂住地</th>
        </thead>
        <tbody>
            <tr>
                <!-- checkbox如果要单选，请将它们的name设置为一样的 -->
                <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>
        </tbody>
    </table>
    </div>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#search').keyup(function(){ //给输入框绑定keyup事件
                $('table tbody tr').hide() //隐藏所有的tr
                .filter(":contains('"+($(this).val())+"')").show(); //显示值与输入框中一致的tr
            }).keyup();//绑定事件后立即触发一次，防止表格更新了而表单元素的值还存在
        });
    </script>
</body>
</html>

运行效果：

表格内容筛选

7、其他应用

7.1 网页字体大小

控制网页的字体，思路已经体现在代码的注释中，值得注意的是单位的获取以及数值的转换。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页字体大小缩放</title>
    <style type="text/css">
        .msg_caption>span{
            display: inline-block;
            font-size: 14px;
            width: 100px;
            height: 25px;
            line-height: 25px; 
            background-color: #ccc;
            text-align: center;
            cursor: pointer;
        }
        .msg_caption>span:hover{
            background-color: orange;
            color: white;
        }

        .comWidth{
            width: 400px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="comWidth">
        <h3>放大/缩小网页字体(12px-30px)：</h3>
        <div class="msg_caption">
            <span class="bigger">放大字体</span>
            <span class="smaller">缩小字体</span>
        </div>
        <div>
            <p id="para">
                This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.
            </p>
        </div>
    </div>

    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            $('.msg_caption>span').click(function(){
                var fontSize = $('#para').css("font-size");//获取段落文字的大小
                var textFontSize = parseInt(fontSize,10);//十进制取整
                var unit = fontSize.slice(-2);//获取单位“px”字符串
                var cName = $(this).attr("class");// 获取当前点击元素的类名
                if(cName == "bigger"){ //如果点击的是bigger，则将字体的数值+2
                    if (textFontSize < 30) {
                        textFontSize += 2;
                    }
                }else if(cName == "smaller"){ //如果点击的是smaller，则将字体的数值-2
                    if (textFontSize > 12) {
                        textFontSize -= 2;
                    }
                }
                $("#para").css("font-size",textFontSize + unit); //设置段落字体的大小，unit表示单位，即px
            });
        });
    </script>
</body>
</html>

运行效果：

改变网页字体大小

7.2 网页选项卡

网页选项卡的实现思路：

使用li创建选项，并为每个选择创建单独的内容div，除了第一个div外都设置为隐藏（display：none;）；
为每个选项li绑定单击事件，单击时给对应元素$(this)添加选中的样式；
获取当前li的索引值（index），并设置与当前li索引值一致的内容div为显示（display：block;）；
使用siblings（）选择其他的内容div，设置为隐藏（display：none;）。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页选项卡</title>
    <style type="text/css">

        .tab{
            font-size: 14px;
            width: 300px;
            margin: 0 auto;
            padding: 10px;
            border: 1px solid #ccc;
        }
        .tab_menu{
            /*float: left;*/
            width: 300px;
            /*border: 1px solid #ccc;*/
            /*height: 30px;*/
        }

        .tab_menu ul{
            float: left;
            padding: 0;
            margin: 0;
            height: 22px;
            /*margin-left: -1px;*/
            margin-bottom: -1px;
        }

        .tab_menu ul li{
            list-style: none;
            float: left;
            display: inline-block;
            width: 50px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            margin-right: 5px;
            border: 1px solid #ccc;
            border-bottom: none;
            background-color: #f6f6f6;
        }

        .tab_box{
            clear: both;
            width: 300px;
            height: 100px;
            border: 1px solid #ccc;
        }

        .hide{
            display: none;
        }
        
        .tab_menu ul .selected,.tab_menu ul li:hover{
            background-color: silver;
            color: white;
            border-color: silver;
        }

    </style>
</head>
<body>
    <div class="tab">
        <div class="tab_menu">
            <ul>
                <li class="selected">时事</li>
                <li>体育</li>
                <li>娱乐</li>
            </ul>
        </div>
        <div class="tab_box">
            <div>时事新闻</div>
            <div class="hide">体育</div>
            <div class="hide">娱乐</div>
        </div>
    </div>

    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            var $div_li = $('div.tab_menu ul li');
            $div_li.click(function(){
                $(this).addClass('selected') //为点击的元素添加样式
                .siblings().removeClass('selected');//移除没有点击的元素样式
                var index = $div_li.index(this);//获取当前li的索引值
                $('div.tab_box > div')//选择tab_box的所有子div，注意：这里只需要选择子div即可。
                .eq(index).show() //显示与li对应的div
                .siblings().hide();//隐藏其他的div
            });
        });
    </script>
</body>
</html>

运行效果：

网页选项卡

7.3 网页换肤（Cookie的使用）

最后编辑于：2017.12.07 19:08:52

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,602评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,442评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,878评论 0赞 344
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,306评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,330评论 5赞 373
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,071评论 1赞 285
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,382评论 3赞 400
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,006评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,512评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,965评论 2赞 325
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,094评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,732评论 4赞 323
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,283评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,286评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,512评论 1赞 262
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,536评论 2赞 354
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,828评论 2赞 345

jQuery对表单、表格的操作及更多应用

1、单行文本框添加获取、失去焦点样式事件

2、多行文本框高度和滚动条的操作

3、复选框的基本操作（全选/全不选、反选、联动）

4、移动下拉框内容（单击移动、全部移动、双击移动）

5、表单验证

6、表格应用

6.1 普通的隔行变色

6.2 单选框控制表格行高亮（单行高亮）

6.3 复选框控制表格行高亮（多行高亮）

6.4 表格展开关闭

6.5 表格内容筛选

7、其他应用

7.1 网页字体大小

7.2 网页选项卡

7.3 网页换肤（Cookie的使用）

推荐阅读更多精彩内容