jQuery實(shí)現(xiàn)的表格展開伸縮效果實(shí)例

2019-11-20 09:03:09

字體：大中小

供稿：網(wǎng)友

本文實(shí)例講述了jQuery實(shí)現(xiàn)的表格展開伸縮效果。分享給大家供大家參考，具體如下：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></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="jquery-1.7.2.min.js" type="text/javascript"></script><script type="text/javascript">$(function(){  $('tr.parent').click(function(){ // 獲取所謂的父行    $(this)    .toggleClass("selected") // 添加/刪除高亮    .siblings('.child_'+this.id).toggle(); // 隱藏/顯示所謂的子行  });})</script></head><body><table>  <thead>    <tr>      <th>姓名</th>      <th>性別</th>      <th>暫住地</th>    </tr>  </thead>  <tbody>    <tr class="parent" id="row_01">      <td colspan="3">前臺(tái)設(shè)計(jì)組</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)開發(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)開發(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>  </tbody></table></body></html>

運(yùn)行效果圖如下：