jQuery对表单表格的操作

一、表单应用

1、表单有3个基本组成部分。

表单标签：包含处理表单数据所用的服务器端程序URL以及数据提交到服务器端的方法。

表单域：包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等。

表单按钮：包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上或者取消传送，还可以用来控制其他定义了处理脚本的处理工作。

2、单行文本框应用

文本框是表单域中最基本的元素，基于文本框的应用有很多。设置添加和失去焦点事件：

$(funciton(){

$(":input").focus(function(){

$(this).addClass("focus");

}).blur(function(){
          $(this).removeClass("focus");

});

});

3、复选框应用

1）当使用全选功能时可以使用attr（）方法设置属性checked的值使复选框选中：

$("#checkedAll“).click(function(){

       $('[name=items]:checkbox").attr('checked",true);

});

如果是不选操作设置为false就可以了。

2）反选操作稍微复杂一些，可以使用非运算符！

$("#checkedRev").click(fucntion(){

$('[name=items]:checkbox').each(function(){

$(this).attr("checked",!(this).attr("checked"));

});

});

 

 

二、表格应用

1、表格变色

$("tr :odd").addClass("odd");//给奇数行添加样式

$("tr:even").addClass("even");//给偶数行添加样式

Ps：odd和even选择器索引是从0开始的所以第1行是偶数。

以上代码将表头也算进去，因此需要排除表格头部<thead>中的<tr>

$("tbody>tr:odd").addClass("odd");

 

如果还需要将某一行变为高亮显示状态，那么可以是哦你contains选择器来实现。例如：“123”这行，代码如下：

$("tr:contains('123')").addClass("selected");

 

2、为表格内单击行进行操作

 $('tbody>tr').click(funcition(){

$(this)

.addClass('selected')

.siblings().removeClass('selected')

.end()

.find(':radio').attr('checked',true);

});