单击行,自己主动选中当前行中的单选框button
需求:单击行,自己主动选中当前行中的单选框button。
aspx页面:
aspx页面:
<asp:Repeater ID="rptRecordList" runat="server"> <HeaderTemplate> <table style="width: 100%;" id="tbList"> </HeaderTemplate> <ItemTemplate> <tr class="order-item"> <td style="width: 96px;" class="item"> <span style="margin-right: 4px;"><%# Container.ItemIndex +1 %></span> <input type="radio" name="rbtn" id="rbtn1" value='<%#Eval("hx_t_watermeterid")%>' /> </td> <td style="width: 200px;" class="item"><%#Eval("name") %></td> <td style="width: 200px;" class="item"><%#Eval("accountnumber") %></td> <td class="last"><%#Eval("hx_fmetercode") %></td> </tr> </ItemTemplate> <FooterTemplate> </table></FooterTemplate> </asp:Repeater>js代码:
$(document).ready(function () { //$("#tbList tr:odd").addClass("alt"); 偶数行样式 //$("#tbList tr:even").css("background-color", "white"); //奇数行样式 $("#tbList tr").hover(function () { $(this).addClass('overCss'); }, function () { $(this).removeClass('overCss'); }).click( function (e) { if ($(e.srcElement || e.target).attr("type") != "radio") { $(this).find(":radio").click(); //$(this).find(":radio").attr("checked", true);有问题 } }); $("#tbList input[type='radio']").click(function () { $(this).parent().parent().addClass('clickCss') .siblings().removeClass('clickCss') .end(); }); });css样式:
.altCss{ background:#fff; /*这行将给全部的tr加上背景色*/ } .overCss{ background-color:#FEF2E8; /* #EEF2FB这个将是鼠标高亮行的背景色*/ } .clickCss{background-color:#A7CDF0;} /*3385ff*/