表格tr行的展開和摺疊效果

admin發表於2019-01-24

本章節分享一段程式碼例項，它實現了tr行展開和摺疊效果。

程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title> 
<style type="text/css">
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>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></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">前臺設計組</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>張山</td>
        <td>男</td>
        <td>浙江</td>
      </tr>
      <tr class="child_row_03">
        <td>張山</td>
        <td>男</td>
        <td>浙江</td>
      </tr>
      <tr class="parent" id="row_04">
        <td colspan="3">前臺設計組</td>
      </tr>
      <tr class="child_row_04">
        <td>張山</td>
        <td>男</td>
        <td>浙江</td>
      </tr>
      <tr class="child_row_04">
        <td>張山</td>
        <td>男</td>
        <td>浙江</td>
      </tr>
      <tr class="parent" id="row_05">
        <td colspan="3">前臺設計組</td>
      </tr>
      <tr class="child_row_05">
        <td>張山</td>
        <td>男</td>
        <td>浙江</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

上面程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.$(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.$("tr.parent").click(function(){}）,為class屬性值為parent的tr行註冊click事件處理函式。

（3）.$(this).toggleClass('selected').siblings('.child_'+this.id).toggle()，這是一個鏈式呼叫，點選以後，當前tr會切換selected樣式了新增或者刪除，然後和自己id相關聯的tr元素切換隱藏和顯示。

二.相關閱讀:

（1）.toggleClass()參閱jQuery toggleClass()一章節。

（2）.siblings()參閱jQuery siblings()一章節。

（3）.toggle()參閱jQuery toggle()一章節。

相關文章