<!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=utf-8" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<title>表格</title>
<style type="text/css">
table thead tr th{border-bottom:1px solid #F9C;}
table{border:1px solid #000;}
table td{ width:100px;}
.even{background:#fff38f;}
.odd{background:#ffffee;}
.selected{background:#0F0;}
.p{cursor:pointer; background:#ccc;}
</style>
<script type="text/javascript">
$(function(){
//1.
$("#tb1 tbody>tr:odd").addClass("odd");
$("#tb1 tbody>tr:even").addClass("even");
//$("tr:contains('张山5')").addClass("selected");
//2.
$("#tb1 tbody>tr").click(function(){
$(this)
.addClass("selected")
.siblings().removeClass("selected")
.end()
.find(":radio").attr("checked",true);
});
$("#tb1 :radio:checked").parent().parent().addClass("selected");
//3.
$("#tb2 tbody>tr").click(function(){
//3.1
//if($(this).hasClass("selected")){
//$(this).removeClass("selected").find(":checkbox").attr("checked",false);
//}else{
//$(this).addClass("selected").find(":checkbox").attr("checked",true);
//}
//3.2
var hasSelectd = $(this).hasClass("selected");
$(this)[hasSelectd?"removeClass":"addClass"]("selected").find(":checkbox").attr("checked",!hasSelectd);
});
$("#tb2 :checkbox:checked").parent().parent().addClass("selected");
//4.
var $par = $("#tb3 tbody .p");
$par.click(function(){
$par.parent().find("."+this.id).toggle();
});
//5.
$("#filterName").keyup(function f(){
$("#tb3 tbody tr")
.hide()
.filter(":contains('"+$(this).val()+"')").show();
});
});
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" id="tb1">
<thead>
<tr><th></th><th>姓名</th><th>性别</th><th>地址</th></tr>
</thead>
<tbody>
<tr>
<td><input name="items" type="radio" checked="checked"/></td>
<td>张山1</td><td>男</td><td>浙江</td>
</tr>
<tr>
<td><input name="items" type="radio" /></td>
<td>张山2</td><td>男</td><td>浙江</td>
</tr>
<tr>
<td><input name="items" type="radio" /></td>
<td>张山3</td><td>男</td><td>浙江</td>
</tr>
<tr>
<td><input name="items" type="radio" /></td>
<td>张山4</td><td>男</td><td>浙江</td>
</tr>
<tr>
<td><input name="items" type="radio" /></td>
<td>张山5</td><td>男</td><td>浙江</td>
</tr>
<tr>
<td><input name="items" type="radio" /></td>
<td>张山6</td><td>男</td><td>浙江</td>
</tr>
</tbody>
</table>
<br /><br /><br />
<table border="0" cellpadding="0" cellspacing="0" id="tb2">
<thead>
<tr><th></th><th>姓名</th><th>性别</th><th>地址</th></tr>
</thead>
<tbody>
<tr>
<td><input name="items" type="checkbox" checked="checked"/></td>
<td>张山1</td><td>男</td><td>浙江</td>
</tr>
<tr>
<td><input name="items" type="checkbox" /></td>
<td>张山2</td><td>男</td><td>浙江</td>
</tr>
<tr>
<td><input name="items" type="checkbox" /></td>
<td>张山3</td><td>男</td><td>浙江</td>
</tr>
<tr>
<td><input name="items" type="checkbox" /></td>
<td>张山4</td><td>男</td><td>浙江</td>
</tr>
<tr>
<td><input name="items" type="checkbox" /></td>
<td>张山5</td><td>男</td><td>浙江</td>
</tr>
<tr>
<td><input name="items" type="checkbox" /></td>
<td>张山6</td><td>男</td><td>浙江</td>
</tr>
</tbody>
</table>
<br /><br /><br />
<label for="filterName">筛选:</label>
<input type="text" id="filterName" />
<table border="0" cellpadding="0" cellspacing="0" id="tb3">
<thead>
<tr><th>姓名</th><th>性别</th><th>地址</th></tr>
</thead>
<tbody>
<tr class="p" id="p1">
<td colspan="3">男</td>
</tr>
<tr class="p1">
<td>张山1</td><td>男</td><td>浙江</td>
</tr>
<tr class="p1">
<td>张山1</td><td>男</td><td>浙江</td>
</tr>
<tr class="p1">
<td>张山2</td><td>男</td><td>浙江</td>
</tr>
<tr class="p" id="p2">
<td colspan="3">女</td>
</tr>
<tr class="p2">
<td>张山4</td><td>女</td><td>浙江</td>
</tr>
<tr class="p2">
<td>张山5</td><td>女</td><td>浙江</td>
</tr>
<tr class="p2">
<td>张山6</td><td>女</td><td>浙江</td>
</tr>
</tbody>
</table>
</body>
</html>
jq-表格操作
最新推荐文章于 2024-07-31 15:52:50 发布