姓名性別暫住證

前端設(shè)計組
張三	男	浙江寧波
李四	女	浙江寧波
王五	男	浙江寧波
前端設(shè)計組
趙六	女	浙江寧波
王五	男	浙江寧波
趙六	女	浙江寧波
前端設(shè)計組
趙六	女	浙江寧波
王五	男	浙江寧波
趙六	女	浙江寧波

JQ代碼:

??? <script type="text/javaScript">
?? ??? ?$(function(){
?? ??? ??? ?$('tr.parent').click(function(){?? //獲取所謂的父級行
?? ??? ??? ??? ?$(this).toggleClass('selected') //添加刪除高亮
?? ??? ??? ??? ??????? .siblings('.child_'+this.id).toggle();? //隱藏或顯示子行
?? ??? ??? ?});
?? ??? ??? ?
?? ??? ?});
?? ?</script>

?

?

html代碼

??? <table style="width:800px; border:1px solid #ccc">
?? ??? ?<thead>
?????? ??? ?<tr>
?????????? ??? ?<th>姓名</th>
??????????????? <th>性別</th>
??????????????? <th>暫住證</th>
??????????? </tr>
??????? </thead>
??????? <tbody>
????? ??? ??? ? <tr class="parent" id="row_01">
?????????? ??? ?<td colspan="3">前端設(shè)計組</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="child_row_01">
?????????? ??? ?<td>王五</td>
??????????????? <td>男</td>
??????????????? <td>浙江寧波</td>
??????????? </tr>
??????????? <tr class="parent" id="row_02">
?????????? ??? ?<td colspan="3">前端設(shè)計組</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="child_row_02">
?? ??? ??? ??? ?<td>趙六</td>
??????????????? <td>女</td>
??????????????? <td>浙江寧波</td>
??????????? </tr>
????????????? <tr class="parent" id="row_03">
?????????? ??? ?<td colspan="3">前端設(shè)計組</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="child_row_03">
?? ??? ??? ??? ?<td>趙六</td>
??????????????? <td>女</td>
??????????????? <td>浙江寧波</td>
??????????? </tr>
??????? </tbody>
??? </table>

?

轉(zhuǎn)載于:https://www.cnblogs.com/qdmaomao/p/4546446.html

總結(jié)

以上是生活随笔為你收集整理的jQuery学习笔记1--表格展开关系的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。