首页 > 代码库 > jquery实现table隔行变色以及单选框选中
jquery实现table隔行变色以及单选框选中
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, th, tr, td 11 { 12 border: 1px solid black; 13 border-collapse: collapse; 14 padding: 3px; 15 } 16 17 td 18 { 19 vertical-align: middle; 20 text-align: center; 21 } 22 23 .even 24 { 25 background: #fff38f; 26 } 27 .odd 28 { 29 background: #ffffee; 30 } 31 .selected 32 { 33 background: lightgreen; 34 } 35 </style> 36 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 37 <script type="text/javascript"> 38 39 $(function () { 40 $("tbody>tr:odd").addClass("odd"); /*给奇数行添加样式*/ 41 $("tbody>tr:even").addClass("even"); /*给偶数行添加样式*/ 42 43 //将某一行加高亮 44 //$("tr:contains(‘刘虹‘)").addClass("selected"); 45 46 //选中某行加高亮 47 $("tbody>tr").click(function () { 48 $(this).addClass("selected") 49 .siblings().removeClass("selected") //去掉兄弟行的样式 50 .end() //返回到当前对象 51 .find(":radio").attr("checked", true) 52 .parent().parent() 53 .siblings().find(":radio").attr("checked", false); 54 55 }); 56 57 }); 58 59 60 </script> 61 </head> 62 <body> 63 <form id="form1" runat="server"> 64 <div> 65 <table> 66 <thead> 67 <tr> 68 <th> 69 </th> 70 <th> 71 姓名 72 </th> 73 <th> 74 性别 75 </th> 76 <th> 77 暂住地 78 </th> 79 </tr> 80 </thead> 81 <tbody> 82 <tr> 83 <td> 84 <input type="radio" /> 85 </td> 86 <td> 87 何龙龙 88 </td> 89 <td> 90 男 91 </td> 92 <td> 93 苏州 94 </td> 95 </tr> 96 <tr> 97 <td> 98 <input type="radio" /> 99 </td>100 <td>101 王龙102 </td>103 <td>104 男105 </td>106 <td>107 南京108 </td>109 </tr>110 <tr>111 <td>112 <input type="radio" />113 </td>114 <td>115 刘虹116 </td>117 <td>118 女119 </td>120 <td>121 天津122 </td>123 </tr>124 <tr>125 <td>126 <input type="radio" />127 </td>128 <td>129 张晓丹130 </td>131 <td>132 女133 </td>134 <td>135 圣地亚哥136 </td>137 </tr>138 <tr>139 <td>140 <input type="radio" />141 </td>142 <td>143 Dannis144 </td>145 <td>146 女147 </td>148 <td>149 Washionton150 </td>151 </tr>152 <tr>153 <td>154 <input type="radio" />155 </td>156 <td>157 何以琛158 </td>159 <td>160 男161 </td>162 <td>163 大阪164 </td>165 </tr>166 </tbody>167 </table>168 </div>169 </form>170 </body>171 </html>
效果图：
jquery实现table隔行变色以及单选框选中
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。