首页 > 代码库 > jQuery学习笔记(6)--复选框控制表格行高亮
jQuery学习笔记(6)--复选框控制表格行高亮
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head runat="server"> 3 <title></title> 4 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 5 <style type="text/css"> 6 table 7 { 8 width: 300px; 9 } 10 table, tr, th, td 11 { 12 border: 1px solid black; 13 border-collapse: collapse; 14 } 15 16 td 17 { 18 text-align: center; 19 } 20 21 .even 22 { 23 background: #fff38f; 24 } 25 .odd 26 { 27 background: #ffffee; 28 } 29 30 .selected 31 { 32 background: lightgreen; 33 } 34 </style> 35 <script type="text/javascript"> 36 $(function () { 37 $("tbody>tr:odd").addClass("odd"); 38 $("tbody>tr:even").addClass("even"); 39 40 //方法1 41 // $("tbody>tr").click(function () { 42 // if ($(this).hasClass("selected")) { 43 // $(this).removeClass("selected").find(":checkbox").attr("checked", false); 44 // } 45 // else { 46 // $(this).addClass("selected").find(":checkbox").attr("checked", true); 47 // } 48 49 // }); 50 51 //方法2 52 $("tbody>tr").click(function () { 53 var hasSelected = $(this).hasClass("selected"); 54 //三元运算符 55 $(this)[hasSelected ? "removeClass" : "addClass"]("selected") 56 .find(":checkbox").attr("checked", true); 57 }); 58 }); 59 </script> 60 </head> 61 <body> 62 <form id="form1" runat="server"> 63 <div> 64 <table> 65 <thead> 66 <tr> 67 <th> 68 </th> 69 <th> 70 姓名 71 </th> 72 <th> 73 性别 74 </th> 75 <th> 76 暂住地 77 </th> 78 </tr> 79 </thead> 80 <tbody> 81 <tr> 82 <td> 83 <input type="checkbox" /> 84 </td> 85 <td> 86 王丹丹 87 </td> 88 <td> 89 女 90 </td> 91 <td> 92 杭州 93 </td> 94 </tr> 95 <tr> 96 <td> 97 <input type="checkbox" /> 98 </td> 99 <td>100 刘莹莹101 </td>102 <td>103 女104 </td>105 <td>106 南京107 </td>108 </tr>109 <tr>110 <td>111 <input type="checkbox" />112 </td>113 <td>114 何晓晓115 </td>116 <td>117 女118 </td>119 <td>120 温哥华121 </td>122 </tr>123 <tr>124 <td>125 <input type="checkbox" />126 </td>127 <td>128 毛龙龙129 </td>130 <td>131 男132 </td>133 <td>134 铁岭135 </td>136 </tr>137 <tr>138 <td>139 <input type="checkbox" />140 </td>141 <td>142 张康143 </td>144 <td>145 男146 </td>147 <td>148 伦敦149 </td>150 </tr>151 <tr>152 <td>153 <input type="checkbox" />154 </td>155 <td>156 戴维斯157 </td>158 <td>159 男160 </td>161 <td>162 墨尔本163 </td>164 </tr>165 </tbody>166 </table>167 </div>168 </form>169 </body>170 </html>
效果图:
jQuery学习笔记(6)--复选框控制表格行高亮
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。