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>
效果图: