JQuery表格操作练习
1. 效果如图
2 练习目的
1 熟悉基本的jquery选择器的运用
2 了解基本的Jquery事件的使用
3 熟悉几个常用的jquery方法等
3 练习功能点
1 隔行变色
odd/even 奇数/偶数行
addClass 添加样式
2 鼠标经过样式
mouseover 事件
removeClass 移除指定样式
siblings 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合
3 行点击样式
hasClass 判断是否存在该样式
find 搜索所有与指定表达式匹配的元素
4 分组效果
toggle 在隐藏和可见之间切换
toggleClass 如果有样式则删除，没有则添加
5 获取焦点样式
focus/blur 获取焦点/失去焦点
6 筛选
keyup 键盘弹起事件
filter 筛选出与指定函数返回值匹配的元素集合
7 全选/反选
4 代码
代码
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=gb2312"
/>
<
title
></
title
>
</
head
>
<
script
src
="jquery-1.4.2.min.js"
type
="text/javascript"
></
script
>
<
link
href
="CSST3.css"
rel
="stylesheet"
type
="text/css"
/>
<
script
type
="text/javascript"
>
$(
function
(){
//
隔行变色
$(
"
tbody > tr:not(.parent):odd
"
).addClass(
"
odd
"
);
$(
"
tbody > tr:not(.parent):even
"
).addClass(
"
even
"
);
//
鼠标经过样式
$(
"
tbody > tr:not(.parent)
"
).mouseover(
function
(){
$(
this
).addClass(
"
mouseOver
"
).siblings().removeClass(
"
mouseOver
"
).end();
});
//
行点击样式
$(
"
tbody > tr:not(.parent)
"
).click(
function
(){
if
($(
this
).hasClass(
"
selected
"
))
{
$(
this
).removeClass(
"
selected
"
).find(
"
:checkbox
"
).attr(
"
checked
"
,
false
);
}
else
{
$(
this
).addClass(
"
selected
"
).find(
"
:checkbox
"
).attr(
"
checked
"
,
true
);
}
});
//
分组效果
$(
"
tr.parent
"
).click(
function
(){
$(
this
).toggleClass(
"
selected
"
).siblings(
"
.child_
"
+
this
.id).toggle();
});
//
获取焦点样式
$(
"
#searchText
"
).focus(
function
(){
$(
this
).addClass(
"
focus
"
);
}).blur(
function
(){
$(
this
).removeClass(
"
focus
"
);
});
//
筛选
$(
"
#searchText
"
).keyup(
function
(){
$(
"
table tbody > tr:not(.parent)
"
).hide()
.filter(
"
:contains('
"
+
($(
this
).val())
+
"
')
"
).show();
var
num
=
$(
"
tbody > tr:not(.parent):visible
"
).size();
$(
"
#result
"
).text(num);
}).keyup();
//
全选
$(
"
#checkAll
"
).click(
function
(){
if
(
this
.checked)
{
$(
"
tbody > tr:not(.parent)
"
).find(
"
:checkbox
"
).each(
function
(){
if
(
!
this
.checked)
{
$(
this
).attr(
"
checked
"
,
true
).parent().parent().addClass(
"
selected
"
);
}
});
}
else
{
$(
"
tbody > tr:not(.parent)
"
).find(
"
:checkbox
"
).each(
function
(){
$(
this
).attr(
"
checked
"
,
false
).parent().parent().removeClass(
"
selected
"
);
});
}
});
//
反选
$(
"
#checkRev
"
).click(
function
(){
$(
"
tbody > tr:not(.parent)
"
).find(
"
:checkbox
"
).each(
function
(){
$(
this
).attr(
"
checked
"
,
!
$(
this
).attr(
"
checked
"
));
if
(
this
.checked)
{
$(
this
).parent().parent().addClass(
"
selected
"
);
}
else
{
$(
this
).parent().parent().removeClass(
"
selected
"
);
}
});
});
});
</
script
>
<
body
>
<
div
id
="search"
>
<
div
id
="searchContent"
>
筛选
<
input
type
="text"
id
="searchText"
/>
找到
<
label
id
="result"
style
="color:#FF0000"
>
0
</
label
>
个结果
</
div
>
</
div
>
<
div
id
="main"
>
<
table
id
="myTb"
>
<
thead
>
<
tr
>
<
th
width
="50px"
></
th
>
<
th
>
品牌
</
th
>
<
th
>
型号
</
th
>
<
th
>
价格
</
th
>
</
tr
>
</
thead
>
<
tbody
>
<
tr
class
="parent"
id
="acer"
>
<
td
colspan
="4"
align
="left"
>
宏基(acer)专区
</
td
>
</
tr
>
<
tr
class
="child_acer"
>
<
td
><
input
type
="checkbox"
/></
td
>
<
td
>
Acer
</
td
>
<
td
>
AS4741ZG-P612G32Mnkk
</
td
>
<
td
><
em
>
3499.00
</
em
></
td
>
</
tr
>
<
tr
class
="child_acer"
>
<
td
><
input
type
="checkbox"
/></
td
>
<
td
>
Acer
</
td
>
<
td
>
AS5740G-434G50Mn
</
td
>
<
td
><
em
>
5599.00
</
em
></
td
>
</
tr
>
<
tr
class
="child_acer"
>
<
td
><
input
type
="checkbox"
/></
td
>
<
td
>
Acer
</
td
>
<
td
>
ThinkPad SL410k（2874-A16）
</
td
>
<
td
><
em
>
4399.00
</
em
></
td
>
</
tr
>
<
tr
class
="parent"
id
="thinkpad"
>
<
td
colspan
="4"
align
="left"
>
联想(ThinkPad)专区
</
td
>
</
tr
>
<
tr
class
="child_thinkpad"
>
<
td
><
input
type
="checkbox"
/></
td
>
<
td
>
ThinkPad
</
td
>
<
td
>
E40（0578-ER5）14.0
</
td
>
<
td
><
em
>
4899.00
</
em
></
td
>
</
tr
>
<
tr
class
="child_thinkpad"
>
<
td
><
input
type
="checkbox"
/></
td
>
<
td
>
ThinkPad
</
td
>
<
td
>
X201i（3249-3HC）
</
td
>
<
td
><
em
>
6999.00
</
em
></
td
>
</
tr
>
<
tr
class
="child_thinkpad"
>
<
td
><
input
type
="checkbox"
/></
td
>
<
td
>
ThinkPad
</
td
>
<
td
>
SL410k（2874-A16）
</
td
>
<
td
><
em
>
3799.00
</
em
></
td
>
</
tr
>
</
tbody
>
</
table
>
</
div
>
<
div
id
="checkDiv"
>
<
div
>
<
input
type
="checkbox"
id
="checkAll"
/>
全选
<
input
type
="checkbox"
id
="checkRev"
/>
反选
</
div
>
</
div
>
</
body
>
</
html
>
代码
/*
CSS Document
*/
body
{
font-size
:
12px
;
}
#main
{
margin
:
0px auto
;
border
:
solid 1px #aaa
;
width
:
600px
;
height
:
auto
;
}
#search
{
margin
:
100px auto 0px auto
;
border
:
solid 1px #aaa
;
width
:
600px
;
height
:
30px
;
}
#checkDiv
{
margin
:
0px auto 0px auto
;
border
:
solid 1px #aaa
;
width
:
600px
;
height
:
25px
;
text-align
:
right
;
}
#searchContent
{
padding-left
:
10px
;
}
#searchText
{
margin-left
:
10px
;
margin-top
:
3px
;
}
#myTb
{
width
:
100%
;
height
:
100%
;
text-align
:
center
;
}
#myTb tr
{
height
:
21px
;
}
#myTb tbody tr
{
cursor
:
pointer
;
}
.even
{
background
:
#CCCCCC
;
}
.odd
{
background
:
#FFFFFF
;
}
.mouseOver
{
background
:
#666666
;
}
.selected
{
background
:
#003366
;
}
.parent
{
background
:
#333333
;
color
:
#FFFFFF
;
}
.focus
{
border
:
solid 1px #999999
;
background
:
#CCCCCC
;
}