如何用jQuery操作表单和表格-js教程-PHP中文网

如何用jQuery操作表单和表格

零到壹度

发布： 2018-03-17 15:45:30

原创

1421 人浏览过

这次给大家带来如何用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(){
    $(&#39;[name=items]:checkbox&#39;).attr(&#39;checked&#39;,true);  //复选框全选，全不选设置为false});

登录后复制

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

登录后复制

4.下拉框应用
将左边框的选项添加给右边框：

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

登录后复制

5.表单验证
验证用户名：

if($(this).is(&#39;#username&#39;)){  
  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;);
    }
}

登录后复制

验证邮箱同理；
提交事件：

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

登录后复制

二.表格应用
1.表格变色
普通的隔行变色：

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

登录后复制

单选框控制表格隔行高亮：

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

登录后复制

2.表格展开关闭

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

登录后复制

3表格内容筛选

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

登录后复制

以上是如何用jQuery操作表单和表格的详细内容。更多信息请关注PHP中文网其他相关文章！