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>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Table expansion fold, default fold </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;} /*  Even line style */
.odd{ background:#FFFFEE;} /*  Odd-line style */
.selected{ background:#FF6500;color:#fff;}
</style>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function (){
 $(".parent").click(function(){
 $(this).toggleClass("selected");
 $(this).siblings().not(".parent").not(":first-child").hide();
 $(this).next().show().next().show();
 });
})
</script>
</head>
<body>
<table>
<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>
</table>
</body>
</html>

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