zoukankan      html  css  js  c++  java
  • 单击行,自己主动选中当前行中的单选框button

    需求:单击行,自己主动选中当前行中的单选框button。

    aspx页面:
         <asp:Repeater ID="rptRecordList" runat="server">
                                        <HeaderTemplate>
                                            <table style=" 100%;" id="tbList">
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <tr class="order-item">
                                                <td style=" 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=" 200px;" class="item"><%#Eval("name") %></td>
                                                <td style=" 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*/


  • 相关阅读:
    hdu 1695(莫比乌斯反演)
    hdu 6035(Colorful Tree)
    Splay模板(序列终结者)
    我的CSDN博客
    【洛谷P2041 分裂游戏】数学+瞎蒙
    【洛谷P1962 斐波那契数列】矩阵快速幂+数学推导
    【LOJ 109 并查集】 并查集
    【洛谷P1816 忠诚】线段树
    【洛谷1339 [USACO09OCT]】热浪Heat Wave 图论+最短路
    【洛谷1433】吃奶酪 搜索+剪枝
  • 原文地址:https://www.cnblogs.com/blfshiye/p/5386166.html
Copyright © 2011-2022 走看看