jQuery實現的表格展開伸縮效果例項
https://www.cnblogs.com/yangpeng-jingjing/p/6003403.html
<table>
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>暫住地</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="row_01">
<td colspan="3">前臺設計組</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">前臺開發組</td>
</tr>
<tr class="child_row_02">
<td>王五</td>
<td>男</td>
<td>湖南長沙</td>
</tr>
<tr class="child_row_02">
<td>找六</td>
<td>男</td>
<td>浙江溫州</td>
</tr>
<tr class="parent" id="row_03">
<td colspan="3">後臺開發組</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>
</tbody>
</table>
<script>
$(function () {
$('tr.parent').click(function () {
//$(this).toggleClass("selected")//新增/刪除高亮
//.siblings('.child_' + this.id).toggle();
$(this).siblings('.child_' + this.id).toggle();
})
})
</script>
<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;
}
/* 偶數行樣式*/
.odd {
background: #FFFFEE;
}
/* 奇數行樣式*/
.selected {
background: #FF6500;
color: #fff;
}
</style>
相關文章
- jQuery可伸縮搜尋框程式碼例項jQuery
- jquery實現的選項卡效果例項程式碼jQuery
- css3元素的伸縮效果程式碼例項CSSS3
- jquery實現的分頁效果例項程式碼jQuery
- jquery實現的下拉和收縮程式碼例項jQuery
- jQuery和css3實現的開關效果程式碼例項jQueryCSSS3
- jquery實現的滑動軸效果程式碼例項jQuery
- 基於JQuery的自定義樹形選單表格,實現展開、收起效果jQuery
- Qt實現遮罩效果並可以拖動伸縮QT遮罩
- 基於Kubernetes的hpa實現pod例項數量的自動伸縮
- js和css實現的扇子展開和摺疊效果程式碼例項JSCSS
- jquery實現的人物關係圖效果程式碼例項jQuery
- Android之AppBarLayout實現懸停吸附伸縮效果AndroidAPP
- jQuery 伸縮搜尋框jQuery
- js實現的div元素尺寸彈性縮放效果程式碼例項JS
- jQuery操作表格table程式碼例項jQuery
- 垂直可伸縮的導航選單例項程式碼單例
- jQuery實現的彈出垂直水平居中視窗效果程式碼例項jQuery
- jQuery 動畫效果程式碼例項jQuery動畫
- 滑鼠懸浮div實現旋轉縮放效果程式碼例項
- jQuery實現的動畫簡單例項jQuery動畫單例
- jQuery如何實現tab選項卡效果jQuery
- 滑鼠懸浮可以伸縮的搜尋框程式碼例項
- jquery實現的點選進行倒數計時效果程式碼例項jQuery
- jQuery實現的tab選項卡程式碼例項jQuery
- js實現jquery的extend()程式碼例項JSjQuery
- jquery小球碰撞效果程式碼例項jQuery
- jQuery tab選項卡效果程式碼例項jQuery
- jQuery點選展開收起程式碼例項jQuery
- jQuery實現的滑鼠懸浮和選中實現表格行背景變色效果jQuery
- jQuery table表格隔行換色程式碼例項jQuery
- jQuery刪除表格指定行程式碼例項jQuery行程
- js實現的垂直選項卡效果程式碼例項JS
- jQuery實現的刪除選中核取方塊當前表格行程式碼例項jQuery行程
- canvas實現的鋸齒效果程式碼例項Canvas
- canvas實現的鐘表效果程式碼例項Canvas
- jQuery實現的選項卡的巢狀程式碼例項jQuery巢狀
- 點選標題可以展開效果程式碼例項