JQuery-table展開與縮小的實現
阿新 • • 發佈：2019-01-23
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title></title> <style> .selected { background:yellow; } </style> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> <script> $(function () { $("tr.parent").click(function (){ $(this).toggleClass("selected").siblings('.child_' + this.id).fadeToggle(); }); }); </script> </head> <body> <table border="1"> <thead> <tr> <th>姓名</th><th>性別</th> </tr> </thead> <tbody> <tr class="parent" id="row_01"> <th colspan="2">前臺設計組</th> </tr> <tr class="child_row_01"> <th>2</th> <th>2</th> </tr> <tr class="child_row_01"> <th class="">1</th> <th class="">1</th> </tr> <tr class="parent" id="row_02"> <th colspan="2">前臺開發組</th> </tr> <tr class="child_row_02"> <th>2</th> <th>2</th> </tr> <tr class="child_row_02"> <th class="">1</th> <th class="">1</th> </tr> </tbody> </table> </body> </html>