jquery 对表单 表格的操作

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

表单域： 包含文本框，密码框，隐藏域。。。。

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

1
$(
function
(){
2
$(
"
:input
"
).focus(
function
(){
3
$(
this
).addClass(
"
focus
"
);
4
}).blur(
function
(){
5
$(
this
).removeClass(
"
focus
"
);
6
})
7
})
8

9

复选框绑定单击事件

1
$(
'
#checkedAll
'
).click(
function
(){
2
$(
'
[name=items]:checkbox
'
).attr(
'
checked
'
,
true
);
3
})
4

5

//
反选操作

6

$(
'
#checkedAll
'
).click(
function
(){
7
$(
'
[name=items]:checkbox
'
).attr(
'
checked
'
,
!
$(
this
).attr(
'
checked
'
));
8
})
9

10
$(
'
#checkedAll
'
).click(
function
(){
11
$(
'
[name=items]:checkbox
'
).each(
function
(){
12

this
.checked
=

!
this
.checked;
13
})
14
})
15

16

//
选中追加到对方

17

$(
'
#add
'
).click(
function
(){
18

var
options
=
$(
'
#select1 option:selected
'
);
//
获取选中的选项

19

var
remove
=
options.remove();
20
remove.appendTo(
'
#select2
'
);
21
})
22

23

//
双击追加到对方

24

$(
'
#add
'
).dbclick(
function
(){
25

var
options
=
$(
'
#option:selected
'
,
this
);
//
获取选中的选项

26

options.appendTo(
'
#select2
'
);
27
})
28

29

30

表单验证

1
$(
'
form:input.required
'
).each(
function
(){
2

var
required
=
$(
"
<strong class='high'>*</strong>
"
);
//
创建元素

3

$(
this
).parent().append(required);
//
将它追加到文档中

4

})
5

表格变色

1
//
隔行变色

2

$(
function
(){
3
$(
'
tr:odd
'
).addClass(
'
odd
'
);
4
$(
'
tr:even
'
).addClass(
'
even
'
);
5
})
6

7
$(
function
(){
8
$(
'
tbody>tr:odd
'
).addClass(
'
odd
'
);
9
$(
'
tbody>tr:even
'
).addClass(
'
even
'
);
10
})
11

12

//
单行选定

13

$(
'
tbody>tr
'
).click(
function
(){
14
$(
this
).addClass(
'
selected
'
)
15
.silblings().removeClass(
'
selected
'
)
16
.end()
17
.find(
'
:radio
'
).attr(
'
checked
'
,
true
);
18
})

表格展开关闭

1
$(
function
(){
2
$(
'
tr.parent
'
).click(
function
(){
3
$(
this
).toggleClass(
'
selected
'
)
//
添加或者删除高亮

4

.siblings(
'
.child
'
+
this
.id).toggle();
//
隐藏或者显示所谓的子行

5

});
6
})

表格内容的筛选

1
$(
function
(){
2
$(
'
#filterName
'
).keyup(
function
(){
3
$(
'
table tbody tr
'
).hide()
4
.filter(
'
:contains("
'
+
( $(
this
).val() )
+
'
")
'
).show();
5
}).keyup();
6
})