jquery操作table,该怎么处理
日期：2014-05-16 浏览次数：20392 次
jquery操作table
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="\js\jquery-1.4.2.min.js"></script>
</head>
<style>
.odd{background:#3CF}
.even{background:#FFC}
.td{border:solid;border-spacing:20px;200px;}
</style>
<tbody>
<table class="td">
<tr>
<th>姓名</th>
<th>性别</th>
<th>家庭地址</th>
</tr>
<tr id="row1" class="parent" colspan="3"><th bgcolor=red>数学组<th></tr>
<tr class="child_row1" ><td>雷军</td><td>女</td><td>上海人</td></tr>
<tr class="child_row1"><td>李开复</td><td>男</td><td>杭州人</td></tr>
<tr class="child_row1"><td>姚明</td><td>男</td><td>绍兴人</td></tr>
<tr id="row2" class="parent" colspan="3"><th bgcolor=red>语文组<th></tr>
<tr class="child_row2"><td>周鸿祎</td><td>男</td><td>宁波人</td></tr>
<tr class="child_row2"><td>李彦宏</td><td>男</td><td>绍兴人</td></tr>
<tr class="child_row2"><td>马云</td><td>男</td><td>绍兴人</td></tr>
</table>
<p>
<label>请输入姓名：</label>
<input type="text" value="" id="filterName" style="background:yellow"/>
</tbody>
</html>
<script>
$(function(){
$("tr.parent").click(function(){
//siblings取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
$(this).toggleClass("even").siblings('.child_'+this.id).toggle();
});
$("tr").hover(function(){
$(this).addClass("odd").siblings().removeClass("odd").end();
});
$("tr:contains('马云')").addClass("odd");//特定选中某一行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="\js\jquery-1.4.2.min.js"></script>
</head>
<style>
.odd{background:#3CF}
.even{background:#FFC}
.td{border:solid;border-spacing:20px;200px;}
</style>
<tbody>
<table class="td">
<tr>
<th>姓名</th>
<th>性别</th>
<th>家庭地址</th>
</tr>
<tr id="row1" class="parent" colspan="3"><th bgcolor=red>数学组<th></tr>
<tr class="child_row1" ><td>雷军</td><td>女</td><td>上海人</td></tr>
<tr class="child_row1"><td>李开复</td><td>男</td><td>杭州人</td></tr>
<tr class="child_row1"><td>姚明</td><td>男</td><td>绍兴人</td></tr>
<tr id="row2" class="parent" colspan="3"><th bgcolor=red>语文组<th></tr>
<tr class="child_row2"><td>周鸿祎</td><td>男</td><td>宁波人</td></tr>
<tr class="child_row2"><td>李彦宏</td><td>男</td><td>绍兴人</td></tr>
<tr class="child_row2"><td>马云</td><td>男</td><td>绍兴人</td></tr>
</table>
<p>
<label>请输入姓名：</label>
<input type="text" value="" id="filterName" style="background:yellow"/>
</tbody>
</html>
<script>
$(function(){
$("tr.parent").click(function(){
//siblings取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
$(this).toggleClass("even").siblings('.child_'+this.id).toggle();
});
$("tr").hover(function(){
$(this).addClass("odd").siblings().removeClass("odd").end();
});
$("tr:contains('马云')").addClass("odd");//特定选中某一行
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
