首页 > 代码库 > jQuery学习笔记(7)--表格展开关闭
jQuery学习笔记(7)--表格展开关闭
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head runat="server"> 3 <title></title> 4 <style type="text/css"> 5 table 6 { 7 width: 300px; 8 } 9 10 table, thead 11 { 12 border: 1px solid black; 13 border-collapse: collapse; 14 } 15 16 .parent 17 { 18 background: lightgreen; 19 } 20 21 .selected 22 { 23 background: #fff38f; 24 } 25 </style> 26 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 27 <script type="text/javascript"> 28 $(function () { 29 30 $("tr.parent").click(function () { 31 $(this).toggleClass("selected").siblings(".child_" + this.id).toggle(); 32 }); 33 34 //$("tr:contains(‘康‘)").addClass("selected");//这个也可以放开看看哦 35 36 //$("table tbody tr").hide().filter(":contains(‘康‘)").show().addClass("selected");//这个也可以放开看看哦 37 38 }); 39 </script> 40 41 </head> 42 <body> 43 <form id="form1" runat="server"> 44 <div> 45 <table> 46 <thead> 47 <tr> 48 <th> 49 姓名 50 </th> 51 <th> 52 性别 53 </th> 54 <th> 55 暂住地 56 </th> 57 </tr> 58 </thead> 59 <tbody> 60 <tr class="parent" id="row_01"> 61 <td colspan="3"> 62 前台设计组 63 </td> 64 </tr> 65 <tr class="child_row_01"> 66 <td> 67 王丹丹 68 </td> 69 <td> 70 女 71 </td> 72 <td> 73 杭州 74 </td> 75 </tr> 76 <tr class="child_row_01"> 77 <td> 78 刘莹莹 79 </td> 80 <td> 81 女 82 </td> 83 <td> 84 南京 85 </td> 86 </tr> 87 <tr class="parent" id="row_02"> 88 <td colspan="3"> 89 前台开发组 90 </td> 91 </tr> 92 <tr class="child_row_02"> 93 <td> 94 何晓晓 95 </td> 96 <td> 97 女 98 </td> 99 <td>100 温哥华101 </td>102 </tr>103 <tr class="child_row_02">104 <td>105 毛龙龙106 </td>107 <td>108 男109 </td>110 <td>111 铁岭112 </td>113 </tr>114 <tr class="parent" id="row_03">115 <td colspan="3">116 后台开发组117 </td>118 </tr>119 <tr class="child_row_03">120 <td>121 张康122 </td>123 <td>124 男125 </td>126 <td>127 伦敦128 </td>129 </tr>130 <tr class="child_row_03">131 <td>132 戴维斯133 </td>134 <td>135 男136 </td>137 <td>138 墨尔本139 </td>140 </tr>141 </tbody>142 </table>143 </div>144 </form>145 </body>146 </html>
效果图:
jQuery学习笔记(7)--表格展开关闭
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。