码迷,mamicode.com
首页 > 其他好文 > 详细

单击行,自动选中当前行中的单选框按钮

时间:2014-11-01 19:15:00      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   color   ar   java   sp   div   

需求:单击行,自动选中当前行中的单选框按钮。
bubuko.com,布布扣
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*/


单击行,自动选中当前行中的单选框按钮

标签:style   blog   http   io   color   ar   java   sp   div   

原文地址:http://blog.csdn.net/zouyujie1127/article/details/40682837

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!