JQuery表格操作练习
时间：2010-10-05 来源：忧忧夏天
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;}
相关阅读 更多 +
