通過(guò)jQuery實(shí)現(xiàn)的表格列表展開(kāi)及收縮折疊特效代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery表格展開(kāi)折疊，默認(rèn)折疊</title>
<style>
table{?
border:0;
border-collapse:collapse;?
}
td{
?font:normal 12px/17px Arial;
padding:2px;
width:100px;
}
th{?
font:bold 12px/17px Arial;
text-align:left;
padding:4px;
border-bottom:1px solid #333;
width:100px;
}
.parent {?
background:#FFF38F;
cursor:pointer;
}? /* 偶數(shù)行樣式*/
.odd{?
background:#FFFFEE;
}? /* 奇數(shù)行樣式*/
.selected{?
background:#FF6500;color:#fff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
/*JavaScript 是 HTML5 以及所有現(xiàn)代瀏覽器中的默認(rèn)腳本語(yǔ)言
jQuery 庫(kù)位于一個(gè) JavaScript 文件中，其中包含了所有的 jQuery 函數(shù)。
可以通過(guò)上面的標(biāo)記把 jQuery 添加到網(wǎng)頁(yè)中
?*/
<script type="text/javascript">
$(function (){??
/*?
jQuery的入口函數(shù)
$(function () {
... //此處是頁(yè)面DOM加載完成的入口
});
$(document).ready(function ()?
{
..//此處是頁(yè)面DOM加載完成的入口});
*/
?$(".parent").click(function(){
/**/
/**/
/**/
/**/
/**/
/**/
? $(this).toggleClass("selected");
/*toggleClass() 方法對(duì)添加和移除被選元素的一個(gè)或多個(gè)類進(jìn)行切換。
"selected" 是表示class="selected"
*/
? $(this).siblings().not(".parent").not(":first-child").hide();
/*siblings() 方法返回被選元素的所有同級(jí)元素
當(dāng)想要選擇的同類名元素在同一層級(jí)時(shí)，即為兄弟級(jí)時(shí)，直接用?
.siblings()?
//siblings() 方法返回被選元素的所有同級(jí)元素。
//同級(jí)元素是共享相同父元素的元素
當(dāng)想要選擇的同類名元素不是同一層級(jí)時(shí)，即父級(jí)不同，可用?
.not()
//not() 方法返回不符合一定條件的元素。
//該方法讓您規(guī)定一個(gè)條件。不符合條件的元素將從選擇中返回，符合條件的元素將被移除
我想選擇不同父級(jí)下的同一類名為 .item 的第i個(gè)元素以外的其他同類名元素時(shí)，可用
$('.item').not(':eq('+i+')')
?*/
? $(this).next().show().next().show();
/*
this代表選定的當(dāng)前元素也就是 。
next()方法表示選取下一個(gè)同胞元素
show()展示出來(lái)
*/
?});
})
</script>
</head>
<body>
<table>
<tr><th>姓名</th><th>性別</th><th>暫住地</th></tr>
<tr class="parent" id="row_01"><td>張山</td><td>男</td><td>浙江寧波</td></tr>
<tr class="child_row_01"><td>張山</td><td>男</td><td>浙江寧波</td></tr>
<tr class="child_row_01"><td>李四</td><td>女</td><td>浙江杭州</td></tr>
<tr class="parent" id="row_02"><td colspan="3">前臺(tái)開(kāi)發(fā)組</td></tr>
<tr class="child_row_02"><td>王五</td><td>男</td><td>湖南長(zhǎng)沙</td></tr>
<tr class="child_row_02"><td>找六</td><td>男</td><td>浙江溫州</td></tr>
<tr class="parent" id="row_03"><td colspan="3">后臺(tái)開(kāi)發(fā)組</td></tr>
<tr class="child_row_03"><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
<tr class="child_row_03"><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
</table>
</body>
</html>
效果圖
