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

需求:单击行,自动选中当前行中的单选框按钮。

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*/
时间: 2025-01-12 02:46:19

单击行,自动选中当前行中的单选框按钮的相关文章

Jquery默认选中单选框radio第一个、选中指定值的单选框

概述 当页面加载时,指定区域的单选框默认选中第一个:用户勾选单选框之后,再次回到页面时,需要选中上次勾选的单选框 JS 选中指定id为"admin-content-task"中的某个radio // 页面隐藏域的值 var platIdVal = $("#platIdVal").val(); // 如果platIdVal为空,说明没有勾选单选框 if(platIdVal==null || platIdVal == ''){ // 默认选中平台单选框的第一个 $(&q

Asp.Net中GridView加入鼠标滑过的高亮效果和单击行颜色改变

转载自:http://www.cnblogs.com/fly_dragon/archive/2010/09/03/1817252.html 1 protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) 2 { 3 //鼠标经过改编颜色 4 if (e.Row.RowType == DataControlRowType.DataRow)//判定当前的行是否属于datarow类型的行 5 { 6 7 //

Angularjs bootstrap table多选(全选),支持单击行选中

最终实现效果:  index.html <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-anima

快捷键:快速选中当前行或者几行

当前行行首:Home 当前行行尾:End 当前文档首行:ctrl+Home 当前文档尾行:ctrl+End 选中当前行: ① 按Home(定位到行首)然后按Shift+Dnd(行尾)   {从行首连选到行尾} ②按Home(定位到行首)然后按Shift+↓(向下箭头) 选中上一行或多行: 按Home(定位到行首)然后按Shift+↑(向上箭头){选多行则连按多次Shift+↑即可}

单击列表行前边的checkbox被选中,再单击,取消选中

需求描述:单击datatabl的一行数据,前边的checkbox被勾选上,再次点击,选中取消,第一次碰到这种需求,不过呢也很实用,简单记录一下 代码: //html代码<tr class="trs" > <td> <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"> <input type="checkbox" class=&

Asp.net--GridView控件--(1)高亮显示当前所在行,(2)高亮显示单击行,(3)绑定数据库数据,(4)分页,(5)导出到excel表格,(6)首列插入序号

//本页代码中的DB类及方法在http://www.cnblogs.com/Deerjiadelu/p/7252769.html中能查询到 (1)Asp.net--GridView控件--高亮显示当前所在行 protected void gvquery_DataBound(object sender, GridViewRowEventArgs e) { //高亮显示光标所在行 if (e.Row.RowType == DataControlRowType.DataRow)//判断当前行是不是数据

跟我一起学extjs5(13--执行菜单命令在tabPanel中显示模块)

跟我一起学extjs5(13--执行菜单命令在tabPanel中显示模块) 上面设计好了一个模块的主界面,下面通过菜单命令的执行来把这个模块加入到主界面当中.在MainModule.js中有一个函数,生成了当前的菜单数据: // 根据data.systemMenu生成菜单条和菜单按钮下面使用的菜单数据 getMenus : function() { var items = []; var menuData = this.get('systemMenu'); // 取得定义好的菜单数据 Ext.A

easyui datagrid行中点击a标签链接,行被选中,但是获取不到对应的参数

easyui中使用比较多的就是datagrid了,表格中添加连接,点击跳转,为比较常用的方式;往往在点及标签后调用getSeleted方法会失效; 一.初始代码: {field: 'id',title : '操作',align: 'center',width:'10%', formatter:function(value,row){ return  "<a onclick='show()' > 查看 </a>"; } }, function show(){ va

ExtJS4.2 Grid知识点六:自动选中指定记录、自动选中全部记录、反向选择

本节主要学习ExtJS4.2 Grid自动选中指定记录.自动选中全部记录.反向选择,即在表格Grid加载数据后自动将符合条件的记录行选中,示例图片: 示例代码  /  在线演示 本例是通过监听Grid的afterrender事件来实现自动选择指定记录行,代码如下实现自动选中性别为男性的记录行: 自动选中指定记录代码 'userlist': {     afterrender: function(testGrid){//侦听goodslistview渲染           // 选中所有记录