jQuery對(duì)表單序攘、表格的操作及更多應(yīng)用

文章頭圖

學(xué)習(xí)了jQuery的基本語法，發(fā)現(xiàn)jQuery的選擇器非常強(qiáng)大丈牢，還解決了瀏覽器的兼容問題，迫不及待想要嘗試一下己沛，于是對(duì)著書本的案例實(shí)現(xiàn)了一些小案例帕识，雖然是小案例，但是對(duì)我來說也不容易肮疗，花了好多時(shí)間才調(diào)試通過。意識(shí)到知識(shí)不去整理们衙，很快就忘記碱呼，加上本次學(xué)習(xí)的都是一些比較常用的案例，于是想記錄下來愚臀，方便以后直接拷貝~~

1、單行文本框添加獲取馋袜、失去焦點(diǎn)樣式事件

對(duì)文本框的操作，包括獲取焦點(diǎn)時(shí)候輸入框變色欣鳖、失去焦點(diǎn)時(shí)恢復(fù)原來的顏色。需要注意的是：input的邊框必須設(shè)置為2px什荣，textarea的邊框必須設(shè)置為1px，這樣才能防止它們獲取和失去焦點(diǎn)時(shí)稻爬，產(chǎn)生“抖動(dòng)”現(xiàn)象胰坟。具體請(qǐng)看下面代碼，大家可以新建一個(gè)html文件笔横，隨意改動(dòng)一下input和textarea的邊框看看效果吹缔。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本框獲取和失去焦點(diǎn)事件</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的邊框大小設(shè)置為2px锯茄，防止focus和blur時(shí)組件的大小發(fā)生改變，產(chǎn)生“抖動(dòng)”晚碾。*/
        }
        .bor2{
            outline: none;
            border:1px solid red; /*textarea的邊框大小設(shè)置為2px，防止focus和blur時(shí)組件的大小發(fā)生改變格嘁，產(chǎn)生“抖動(dòng)”*/廊移。
        }
    </style>
</head>


<body>
    <form action="#" method="POST" id="regForm">
        <fieldset>
            <legend>個(gè)人基本信息</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">詳細(xì)信息:</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(){  //單獨(dú)input設(shè)置樣式，防止邊框大小產(chǎn)生的“抖動(dòng)”懂诗！
            $("input").focus(function(){
                $(this).addClass("bor");
            }).blur(function(){
                $(this).removeClass("bor");
            });

            $("textarea").focus(function(){ //單獨(dú)textarea設(shè)置樣式苗膝，防止邊框大小產(chǎn)生的“抖動(dòng)”！
                $(this).addClass("bor2");
            }).blur(function(){
                $(this).removeClass("bor2");
            });
        });
    </script>

</body>
</html>

運(yùn)行效果如下：

文本框獲取和失去焦點(diǎn)樣式控制

2、多行文本框高度和滾動(dòng)條的操作

對(duì)多行文本框添加事件病附，包括調(diào)整文本框的高度侯繁、操作滾動(dòng)條，加上過度動(dòng)畫等贮竟。具體請(qǐng)看代碼：

<!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; /*設(shè)置指針為手型，使其像可點(diǎn)擊的按鈕*/
        }
        span:hover{  /*鼠標(biāo)經(jīng)過技健，背景變?yōu)槌壬?/
            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">滾動(dòng)條上</span>
            <span class="down">滾動(dòng)條下</span>
        </div>
        <div>
            <label for="comment">文本框的高度（范圍50px-500px惰拱，每次調(diào)整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');//獲取評(píng)論框
            var heigh="";
            $('.bigger').click(function(){  //給“放大按鈕”綁定事件
                if (!$comment.is(":animated")){ //確保當(dāng)前沒有動(dòng)畫正在執(zhí)行，防止動(dòng)畫隊(duì)列累積欣孤。
                    if ($comment.height()<500) {
                        // $comment.height($comment.height() - 50);沒有動(dòng)畫的代碼
                        $comment.animate({height:"+=50"},300); //設(shè)置動(dòng)畫昔逗。讓過度更自然
                    }
                }

            }); 

            $('.smaller').click(function(){ //給“縮小按鈕”綁定事件
                if (!$comment.is(":animated")) { //確保當(dāng)前沒有動(dòng)畫正在執(zhí)行，防止動(dòng)畫隊(duì)列累積勾怒。
                    if ($comment.height()>50) {
                        // $comment.height($comment.height() - 50);沒有動(dòng)畫的代碼
                        $comment.animate({height:"-=50"},300); //設(shè)置動(dòng)畫。讓過度更自然
                    }
                }

            }); 


            $('.up').click(function(){ //給“向上滾動(dòng)”綁定事件
                if (!$comment.is(":animated")) { //確保當(dāng)前沒有動(dòng)畫正在執(zhí)行段只，防止動(dòng)畫隊(duì)列累積。
                    // $comment.height($scrollTop.height() - 50);沒有動(dòng)畫的代碼
                    $comment.animate({scrollTop:"-=50"},300); //設(shè)置動(dòng)畫赞枕。讓過度更自然
                }

            }); 

            $('.down').click(function(){ //給“向下滾動(dòng)”綁定事件
                if (!$comment.is(":animated")) { //確保當(dāng)前沒有動(dòng)畫正在執(zhí)行幔妨，防止動(dòng)畫隊(duì)列累積。
                    // $comment.height($scrollTop.height() + 50);沒有動(dòng)畫的代碼
                    $comment.animate({scrollTop:"+=50"},300); //設(shè)置動(dòng)畫误堡。讓過度更自然
                }

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

運(yùn)行效果如下：

image.png

3、復(fù)選框的基本操作（全選/全不選陪踩、反選、聯(lián)動(dòng)）

對(duì)復(fù)選框的操作肩狂，包括：全選/全不選、反選傻谁、聯(lián)動(dòng)（全選按鈕的狀態(tài)會(huì)跟隨選項(xiàng)組的變化而變化，選項(xiàng)組中有一個(gè)沒有選中谈飒，全選按鈕都不會(huì)選中。反過來也一樣杭措，選項(xiàng)組全部選中時(shí)钾恢，全選按鈕會(huì)自動(dòng)變?yōu)檫x中狀態(tài)）。代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>復(fù)選框基本操作</title>
    <style type="text/css">
        form{
            width: 600px;
            margin: 0 auto;
        }
        form div{
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <form>
        <h3>你愛好的運(yùn)動(dòng)是什么瘩蚪？</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寫法，更加簡(jiǎn)潔
                });
            });

            $('[name=items]:checkbox').click(function(){  //對(duì)復(fù)選框組綁定事件
                var flag=true;
                $('[name=items]:checkbox').each(function(){ //遍歷每一個(gè)名為items的checkbox
                    if(!this.checked){//如果有未選中的
                        flag=false;
                    }
                });
                $('#checkAll').prop('checked',flag);//將全選框設(shè)置為“未選中”狀態(tài) 
            });

            $('#send').click(function(){ //為發(fā)送按鈕綁定click事件祠斧，彈出選中的選項(xiàng)拱礁。
                var str="你選中的是:\r\n";
                $('[name=items]:checkbox:checked').each(function(){
                    str += $(this).val()+"\r\n";
                });
                alert(str);
            });

        });


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

運(yùn)行效果：

復(fù)選框操作

4辕漂、移動(dòng)下拉框內(nèi)容（單擊移動(dòng)、全部移動(dòng)鸯乃、雙擊移動(dòng)）

對(duì)下拉框的操作，包括：將選中的內(nèi)容移動(dòng)到另一個(gè)選項(xiàng)組中缨睡、雙擊某個(gè)選項(xiàng)移動(dòng)到另一個(gè)選項(xiàng)組中陈辱、全部選項(xiàng)移動(dòng)到另一個(gè)選項(xiàng)組中。代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>復(fù)制下拉框的內(nèi)容</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">選項(xiàng)1</option>
            <option value="2">選項(xiàng)2</option>
            <option value="3">選項(xiàng)3</option>
            <option value="4">選項(xiàng)4</option>
            <option value="5">選項(xiàng)5</option>
        </select>
        <div>
            <span id="add">>>添加選中內(nèi)容到右邊</span>
            <span id="addAll">>>添加所有內(nèi)容到右邊</span>
        </div>
    </div>
    <div class="content">
        <h3>右邊：</h3>
        <select multiple id="select2">
        </select>
        <div>
            <span id="remove">>>移動(dòng)選中內(nèi)容到左邊</span>
            <span id="removeAll">>>移動(dòng)所有內(nèi)容到左邊</span>
        </div>
    </div>
    <div class="tips">提示：雙擊也可以移動(dòng)選項(xiàng)陋守！</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移動(dòng)到右邊
            var $options = $('#select1 option:selected');
            // var $remove = $options.remove();//append方法自帶刪除功能，不用remove也行水评。
            $options.appendTo('#select2');
        });

        $('#addAll').click(function(){ //將全部option移動(dòng)到右邊
            var $options = $('#select1 option');
            // var $remove = $options.remove();//append方法自帶刪除功能，不用remove也行中燥。
            $options.appendTo('#select2');
        });

        $('#remove').click(function(){ //將全部option移動(dòng)到左邊
            var $options = $('#select2 option:selected');
            // var $remove = $options.remove();//append方法自帶刪除功能，不用remove也行拿霉。
            $options.appendTo('#select1');
        });

        $('#removeAll').click(function(){ //將全部option移動(dòng)到左邊
            var $options = $('#select2 option');
            // var $remove = $options.remove();//append方法自帶刪除功能，不用remove也行友浸。
            $options.appendTo('#select1');
        });

        $('#select1').dblclick(function(){ //雙擊將選中option移動(dòng)到右邊
            // var $options = $('option:selected',this);//另一種選中方式
            var $options = $('#select1 option:selected');
            // var $remove = $options.remove();//append方法自帶刪除功能偏窝，不用remove也行。
            $options.appendTo('#select2');
        });


        $('#select2').dblclick(function(){ //雙擊將選中option移動(dòng)到左邊
            var $options = $('option:selected',this);
            // var $options = $('#select1 option:selected');//另一種選中方式
            // var $remove = $options.remove();//append方法自帶刪除功能祭往，不用remove也行。
            $options.appendTo('#select1');
        });
    });
</script>
</body>
</html>

運(yùn)行效果：

移動(dòng)下拉框的內(nèi)容

5驮肉、表單驗(yàn)證

表單驗(yàn)證包括：對(duì)輸入內(nèi)容進(jìn)行實(shí)時(shí)檢測(cè)并給出相應(yīng)提示、內(nèi)容不符合要求時(shí)阻止表單提交离钝。代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單驗(yàn)證</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>表單驗(yàn)證(郵箱沒有進(jìn)行正則表達(dá)式驗(yàn)證)</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">個(gè)人信息：</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>');//創(chuàng)建元素
                $(this).parent().append($required);//把元素追加到文檔中
            });

            $('form :input').blur(function(){ //為表單元素添加失去焦點(diǎn)事件
                var $parent=$(this).parent();
                $parent.find(".formTips").remove();//刪除以前的提醒元素
                //驗(yàn)證用戶名
                if ($(this).is('#userName')) {
                    if (this.value==""||this.value.length<6) {
                        var errMsg = "請(qǐng)至少輸入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();
                    }
                }
                //驗(yàn)證郵箱
                if ($(this).is('#email')) {
                    if (this.value=="") {
                        var errMsg = "請(qǐng)輸入正確的郵箱地址";
                        $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');//觸發(fā)失去焦點(diǎn)事件
                    var $errNum=$('form .onError').length;
                    if ($errNum>0) {
                        return false;
                    }
                    console.log('aa');
                    alert("已提交卵渴！");
                });
        });
    </script>
</body>
</html>

運(yùn)行效果：

表單驗(yàn)證

6鲤竹、表格應(yīng)用

6.1 普通的隔行變色

普通的隔行變色可以，新建兩個(gè)不同的樣式辛藻，例如新建兩個(gè)樣式：.even{background:orange;} 和 .odd{background:skyblue;}。然后通過jQuery給表格的奇數(shù)行添加一個(gè)名為odd的類痘拆，給偶數(shù)行添加一個(gè)名為even的類。這樣就可以實(shí)現(xiàn)隔行變色效果了错负。代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常規(guī)表格隔行高亮</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>山東濟(jì)南</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>男</td>
                <td>湖南長(zhǎng)沙</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>

運(yùn)行效果：

常規(guī)隔行高亮

6.2 單選框控制表格行高亮（單行高亮）

單選框控制表格行高亮，主要思路是：

在每個(gè)行第一個(gè)td前增加一個(gè)單選框折联；
新建一個(gè)行的樣式（例如：selected{...}），用于區(qū)分選中和未選中狀態(tài)诚镰；
給表格每行增加單擊事件，單擊時(shí)給對(duì)應(yīng)行增加樣式addClass("selected")清笨，并移除其他行的樣式removeClass("selected")刃跛；
找到當(dāng)前行的單選按鈕，設(shè)置按鈕為選中狀態(tài)prop('checked',true)桨昙。
具體請(qǐng)看下方代碼（注意：請(qǐng)將radio的name設(shè)置為一致的，否則無法實(shí)現(xiàn)單選功能）：

<!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如果要單選齐苛，請(qǐng)將它們的name設(shè)置為一樣的 -->
                <td><input checked="" type="radio" name="haha">張三</td> 
                <td>男</td>
                <td>浙江寧波</td>
            </tr>
            <tr>
                <td><input type="radio" name="haha">李四</td>
                <td>女</td>
                <td>山東濟(jì)南</td>
            </tr>
            <tr>
                <td><input type="radio" name="haha">王五</td>
                <td>男</td>
                <td>湖南長(zhǎng)沙</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(){
            //判斷當(dāng)前行（的radio）是否被選中桂塞，如果選中則加上selected類使其變色
            $('tbody>tr:has(:checked)').addClass('selected');
            $('tbody>tr').click(function(){
                $(this)
                .addClass('selected')
                .siblings().removeClass('selected')
                .end()
                .find(':radio').prop('checked',true); //如果要能反復(fù)切換選中狀態(tài)，請(qǐng)使用prop()代替attr()阁危。
              });

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

運(yùn)行效果：

單選框選中時(shí)列表行高亮

6.3 復(fù)選框控制表格行高亮（多行高亮）

復(fù)選框可以讓選中的表格行高亮，支持多選狂打。思路和單行選擇差不多，這里不做過多贅述菱父，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>復(fù)選框選擇行并高亮</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如果要單選浙宜，請(qǐng)將它們的name設(shè)置為一樣的 -->
                <td><input checked type="checkbox" name="haha">張三</td> 
                <td>男</td>
                <td>浙江寧波</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="haha">李四</td>
                <td>女</td>
                <td>山東濟(jì)南</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="haha">王五</td>
                <td>男</td>
                <td>湖南長(zhǎng)沙</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(){
            //判斷當(dāng)前行（的checkbox）是否被選中蛹磺，如果選中則加上selected類使其變色
            $('tbody>tr:has(:checked)').addClass('selected');
            $('tbody>tr').click(function(){
                //判斷當(dāng)前行(tr)是否含有selected類
                var hasSelected = $(this).hasClass('selected');
                //如果選中，則移除selected類,否則就加上selected類
                $(this)[hasSelected?"removeClass":"addClass"]('selected')
                // .find(':checkbox').attr('checked',!hasSelected); //使用attr()設(shè)置checked屬性裙品，會(huì)導(dǎo)致取消選中后無法再次選中俗批，建議使用prop()
                .find(':checkbox').prop('checked',!hasSelected); //查找內(nèi)部checkedbox岁忘，設(shè)置對(duì)應(yīng)的屬性
              });
        });
    </script>
</body>
</html>

復(fù)選框，多行高亮

6.4 表格展開關(guān)閉

表格的展開和關(guān)閉干像，主要是對(duì)行進(jìn)行編組，單擊組名對(duì)應(yīng)的行麻汰，可以展開/折疊對(duì)應(yīng)的子行戚篙。主要思路是：

新建對(duì)應(yīng)組，組名對(duì)應(yīng)的行岔擂，id設(shè)置為row_x,x代表第x組；
子行的類名可以設(shè)置為child_row_x這樣方便jQuery代碼的編寫智亮；
通過jQuery給每行添加單擊事件，使用toggleClass()函數(shù)刪除/添加高亮阔蛉；該函數(shù)可以增加或刪除控制高亮的類，存在就刪除状原，不存在就添加；
通過siblings()和toggle()隱藏/顯示行颠区。siblings()用于選擇同組內(nèi)的子行，然后通過toggle()控制顯示和隱藏（隱藏的就設(shè)置為顯示毕莱，顯示的就設(shè)置為隱藏）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格打開/關(guān)閉</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">設(shè)計(jì)組</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">技術(shù)組</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">產(chǎn)品組</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>

運(yùn)行效果：

表格行的展開與關(guān)閉

6.5 表格內(nèi)容篩選

表格內(nèi)容的篩選蛹稍，主要通過contains()和filter()來實(shí)現(xiàn)部服。主要步驟如下：

首先給輸入框綁定keyup事件，隱藏表格的所有“行(tr)”廓八；
通過contains()篩選出用戶輸入的內(nèi)容赵抢，然后通過filter()篩選出包含對(duì)應(yīng)字符的“行(tr)”声功；
將第2步篩選出的“行(tr)”顯示出來。
代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格內(nèi)容篩選</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如果要單選减噪，請(qǐng)將它們的name設(shè)置為一樣的 -->
                <td>張三</td> 
                <td>男</td>
                <td>浙江寧波</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>山東濟(jì)南</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>男</td>
                <td>湖南長(zhǎng)沙</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();//綁定事件后立即觸發(fā)一次，防止表格更新了而表單元素的值還存在
        });
    </script>
</body>
</html>

運(yùn)行效果：

表格內(nèi)容篩選

7醋闭、其他應(yīng)用

7.1 網(wǎng)頁字體大小

控制網(wǎng)頁的字體朝卒，思路已經(jīng)體現(xiàn)在代碼的注釋中，值得注意的是單位的獲取以及數(shù)值的轉(zhuǎn)換抗斤。
代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>網(wǎng)頁字體大小縮放</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>放大/縮小網(wǎng)頁字體(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);//十進(jìn)制取整
                var unit = fontSize.slice(-2);//獲取單位“px”字符串
                var cName = $(this).attr("class");// 獲取當(dāng)前點(diǎn)擊元素的類名
                if(cName == "bigger"){ //如果點(diǎn)擊的是bigger，則將字體的數(shù)值+2
                    if (textFontSize < 30) {
                        textFontSize += 2;
                    }
                }else if(cName == "smaller"){ //如果點(diǎn)擊的是smaller龙宏，則將字體的數(shù)值-2
                    if (textFontSize > 12) {
                        textFontSize -= 2;
                    }
                }
                $("#para").css("font-size",textFontSize + unit); //設(shè)置段落字體的大小，unit表示單位银酗，即px
            });
        });
    </script>
</body>
</html>

運(yùn)行效果：

改變網(wǎng)頁字體大小

7.2 網(wǎng)頁選項(xiàng)卡

網(wǎng)頁選項(xiàng)卡的實(shí)現(xiàn)思路：

使用li創(chuàng)建選項(xiàng)徒像，并為每個(gè)選擇創(chuàng)建單獨(dú)的內(nèi)容div，除了第一個(gè)div外都設(shè)置為隱藏（display：none;）锯蛀；
為每個(gè)選項(xiàng)li綁定單擊事件，單擊時(shí)給對(duì)應(yīng)元素$(this)添加選中的樣式旁涤；
獲取當(dāng)前l(fā)i的索引值（index），并設(shè)置與當(dāng)前l(fā)i索引值一致的內(nèi)容div為顯示（display：block;）劈愚；
使用siblings（）選擇其他的內(nèi)容div，設(shè)置為隱藏（display：none;）造虎。
代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>網(wǎng)頁選項(xiàng)卡</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">時(shí)事</li>
                <li>體育</li>
                <li>娛樂</li>
            </ul>
        </div>
        <div class="tab_box">
            <div>時(shí)事新聞</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') //為點(diǎn)擊的元素添加樣式
                .siblings().removeClass('selected');//移除沒有點(diǎn)擊的元素樣式
                var index = $div_li.index(this);//獲取當(dāng)前l(fā)i的索引值
                $('div.tab_box > div')//選擇tab_box的所有子div算凿，注意：這里只需要選擇子div即可瓤帚。
                .eq(index).show() //顯示與li對(duì)應(yīng)的div
                .siblings().hide();//隱藏其他的div
            });
        });
    </script>
</body>
</html>

運(yùn)行效果：

網(wǎng)頁選項(xiàng)卡

7.3 網(wǎng)頁換膚（Cookie的使用）

最后編輯于：2017.12.07 19:08:52

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市恰起，隨后出現(xiàn)的幾起案子住练，更是在濱河造成了極大的恐慌，老刑警劉巖靴庆，帶你破解...
沈念sama閱讀 217,406評(píng)論 6贊 503
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異炉抒，居然都是意外死亡奢讨，警方通過查閱死者的電腦和手機(jī)焰薄，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,732評(píng)論 3贊 393
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來塞茅，“玉大人，你說我怎么就攤上這事野瘦。” “怎么了缅刽？”我有些...
開封第一講書人閱讀 163,711評(píng)論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)衰猛。經(jīng)常有香客問我，道長(zhǎng)啡省，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 58,380評(píng)論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任卦睹，我火速辦了婚禮，結(jié)果婚禮上结序，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好邀层，可當(dāng)我...
茶點(diǎn)故事閱讀 67,432評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布遂庄。她就那樣靜靜地躺著，像睡著了一般涛目。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上霹肝，一...
開封第一講書人閱讀 51,301評(píng)論 1贊 301
城市分裂傳說
那天，我揣著相機(jī)與錄音阿迈，去河邊找鬼。笑死苗沧，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的待逞。我是一名探鬼主播，決...
沈念sama閱讀 40,145評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼识樱，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來了怜庸？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,008評(píng)論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤割疾，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后宏榕，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,443評(píng)論 1贊 314
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡麻昼，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,649評(píng)論 3贊 334
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了抚芦。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片迈螟。...
茶點(diǎn)故事閱讀 39,795評(píng)論 1贊 347
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡尔崔，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出您旁，到底是詐尸還是另有隱情轴捎，我是刑警寧澤，帶...
沈念sama閱讀 35,501評(píng)論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布侦副，位于F島的核電站，受9級(jí)特大地震影響秦驯，放射性物質(zhì)發(fā)生泄漏尺碰。R本人自食惡果不足惜亲桥，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,119評(píng)論 3贊 328
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望题篷。院中可真熱鬧，春花似錦厅目、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,731評(píng)論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽路星。三九已至，卻和暖如春瘟忱，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背访诱。一陣腳步聲響...
開封第一講書人閱讀 32,865評(píng)論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留触菜，地道東北人。一個(gè)月前我還...
沈念sama閱讀 47,899評(píng)論 2贊 370
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像剩蟀，于是被迫代替她去往敵國和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子育特，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,724評(píng)論 2贊 354

jQuery對(duì)表單偎捎、表格的操作及更多應(yīng)用

jQuery對(duì)表單序攘、表格的操作及更多應(yīng)用

1、單行文本框添加獲取馋袜、失去焦點(diǎn)樣式事件

2、多行文本框高度和滾動(dòng)條的操作

3、復(fù)選框的基本操作（全選/全不選陪踩、反選、聯(lián)動(dòng)）

4辕漂、移動(dòng)下拉框內(nèi)容（單擊移動(dòng)、全部移動(dòng)鸯乃、雙擊移動(dòng)）

5驮肉、表單驗(yàn)證

6鲤竹、表格應(yīng)用

6.1 普通的隔行變色

6.2 單選框控制表格行高亮（單行高亮）

6.3 復(fù)選框控制表格行高亮（多行高亮）

6.4 表格展開關(guān)閉

6.5 表格內(nèi)容篩選

7醋闭、其他應(yīng)用

7.1 網(wǎng)頁字體大小

7.2 網(wǎng)頁選項(xiàng)卡

7.3 網(wǎng)頁換膚（Cookie的使用）

推薦閱讀更多精彩內(nèi)容