jQuery implements table expansion and collapse method

  • 2020-06-03 05:49:49
  • OfStack

An example of jQuery shows how to expand and collapse tables. Share to everybody for everybody reference. The specific analysis is as follows:

This is a very humanized 1 special effect code, the implementation of clicking one of the parents, the other one opened before the parent will automatically close

<!DOCTYPE html>
<meta charset="utf-8" />
<title>jQuery Table expansion fold, default fold </title>
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;
.parent { background:#FFF38F;cursor:pointer;} /*  Even line style */
.odd{ background:#FFFFEE;} /*  Odd-line style */
.selected{ background:#FF6500;color:#fff;}
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function (){
<tr><th> The name </th><th> gender </th><th> out-flown </th></tr>
<tr class="parent" id="row_01">
<td> Zhang shan </td><td> male </td><td> Ningbo, zhejiang province </td></tr>
<tr class="child_row_01"><td> Zhang shan </td><td> male </td><td> Ningbo, zhejiang province </td></tr>
<tr class="child_row_01"><td> li 4</td><td> female </td><td> Zhejiang hangzhou </td></tr>
<tr class="parent" id="row_02"><td colspan="3"> Foreground development team </td></tr>
<tr class="child_row_02"><td> The king 5</td><td> male </td><td> Hunan changsha </td></tr>
<tr class="child_row_02"><td> Looking for a 6</td><td> male </td><td> In wenzhou, zhejiang province </td></tr>
<tr class="parent" id="row_03"><td colspan="3"> Background development Team </td></tr>
<tr class="child_row_03"><td>Rain</td><td> male </td><td> Zhejiang hangzhou </td></tr>
<tr class="child_row_03"><td>MAXMAN</td><td> female </td><td> Zhejiang hangzhou </td></tr>

Hopefully, this article has been helpful in your jQuery programming.

Related articles: