如何用jQuery操作表單和表格

這次帶給大家如何用jQuery操作表單和表格以及一些其它應用，下面跟隨小編，一起來看一下。

一.表單應用 

一個表單有三個基本組成： 

（1）表單標籤：包含處理表單資料所使用的伺服器端程式URL以及資料提交到伺服器的方法。
（2）表單網域：包含文字方塊、密碼方塊、隱藏網域、多行文字方塊、核取方塊、單選方塊、下拉選取方塊和文字上傳方塊等。
（3）表單按鈕：包含提交按鈕、重設按鈕和一般按鈕，用於將資料傳送到伺服器上或取消傳送，也可以用來控制其他定義了處理腳本的處理工作。
1.單行文字方塊應用
當文字方塊取得焦點後它的顏色需要變化，當它失去焦點後，則要恢復為原來的樣式，可以使用css中的偽類別選擇符來實現以上的功能，css程式碼如下：

input:focus ,textarea:focus{ 
   border:1px solid #f00;  
     background:#fcc;}

但是IE6並不支援除超連結元素之外的:hover偽類選擇符，此時可以利用jQuery彌補：

.focus{
    border:1px solid #f00;
    background:#fcc;
}
$(function(){
    $(":input").focus(function(){
        $(this).addClass("focus");
    }).blur(function(){
        $(this).removeClass("focus");
    });
});

2.多行文字方塊套用
高度變化：透過「放大」和「縮小」按鈕綁定點擊事件，對應文字方塊的高度也會放大或縮小。
捲軸高度變化：透過「向上」和「向下」按鈕綁定點擊事件
3.複選框應用

$("#CheckedAll").click(function(){
    $('[name=items]:checkbox').attr('checked',true);  //复选框全选，全不选设置为false});

$("#CheckedRev").click(function(){
    $('[name=items]:checkbox').each(function(){
        $(this).attr("checked", !$(this).attr("checked"));  //反选
    });
});

4.下拉框應用
將左邊框的選項加入右邊框：

('#add').click(function(){
    var $options=$('#select1 options:selected');  //获取全部的选项
    $options.appendTo('#select2');  //追加给对方})

#5.表單驗證
驗證使用者名稱：

if($(this).is('#username')){  
  if(this.value==""||this.value.length<6){     
     var errorMsg=&#39;请输入至少6位的用户名&#39;；
        $parent.append(&#39;<span clsaa="formtips onError">&#39;+errorMsg+&#39;</span>&#39;);
    }else{      
      var okMsg=&#39;输入正确&#39;；
        $parent.append(&#39;<span class="formtips onSuccess">&#39;+okMsg+&#39;</span>&#39;);
    }
}

驗證郵件信箱同理；
提交事件：

$('#send').click(function(){
    $("form.required:input").trigger('blur');  
      var numError=$('form.onError').length; 
         if(numError){    
             return false;
    }
    alert("注册成功，密码已发到你的邮箱，请查收");
});

#二.表格應用程式
1. 表格變色
普通的隔行變色：

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

單選框控製表格隔行高亮：

$('tbody>tr').click(function(){
    $(this)
        .addClass('selected')   //给单击的当前行添加高亮样式
        .siblings().removeClass('selected') //将兄弟行的高亮模式去掉，执行完对象变为$(this).sibling()
        .end()  //返回$(this)对象
        .find(':radio').attr('checked',true); //将此行所在的单选框也选中});

2.表格展開關閉

$(function(){
    $('tr.parent').click(function(){   //获取所谓的父行
        $(this)
        .toggleClass("selected")    //添加/删除高亮
        .siblings('.child_'+this.id).toggle();  //隐藏/显示所谓的子行
    }).click();  //当用户刚进入界面时默认收缩起来})

3表格內容篩選

#################################### ###

$(function(){
    $("#filterName").keyup(function(){  //给文本框绑定触发事件
        $("table tbody tr").hide()  
        .filter(":contains('"+($(this).val())+"')").show(); //根据文本框的输入筛选出行中有val值的行
    });
});

以上是如何用jQuery操作表單和表格的詳細內容。更多資訊請關注PHP中文網其他相關文章！