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



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*/

单击行,自己主动选中当前行中的单选框button的更多相关文章

  1. .net dataGridView当鼠标经过时当前行背景色变色;然后【给GridView增加单击行事件,并获取单击行的数据填充到页面中的控件中】

    1.首先在前台dataGridview属性中增加onRowDataBound属性事件 2.然后在后台Observing_RowDataBound事件中增加代码 protected void Obser ...

  2. angularjs中的单选框绑定数据注意事项

    这里说的是angularjs 1.x 在实现单选框时,我们完全可以用html自带的<input type="radio"/>,但是配合angularjs 中的双向绑定, ...

  3. tkiner中Radiobutton单选框控件(七)

    Radiobutton控件 由于本次内容中好多知识都是之前重复解释过的,本次就不做解释了.不太清楚的内容请参考tkinter1-6节中的内容 import tkinter wuya = tkinter ...

  4. tkinter中Radiobutton单选框控件(七)

    Radiobutton控件 由于本次内容中好多知识都是之前重复解释过的,本次就不做解释了.不太清楚的内容请参考tkinter1-6节中的内容 import tkinter wuya = tkinter ...

  5. 四十二、在SAP中添加单选框

    一.上代码 二.上文本替换截图 三.上效果图

  6. EasyUi datagrid 单选框选中事件

    Easyui datagrid中的单选框默认是这样定义的 columns: [[ { field: 'CK', title: '', checkbox: true, width: 30 }]]. 平常 ...

  7. 在datagrid中实现单击行选择整行

    首先添加列:<asp:ButtonColumn Text="选择" CommandName="Select" Visible="False&qu ...

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

    转载自:http://www.cnblogs.com/fly_dragon/archive/2010/09/03/1817252.html protected void GridView1_RowDa ...

  9. jqgrid 单击行启用行编辑,切换行保存原编辑行

    为了加速表格互动编辑,我们往往希望通过选中行就触发了行编辑,完成行编辑后,再选中另一个行做编辑,同时上一个编辑行被自动保存,直至完成需要的编辑内容. 页面效果可能如下: 1)设置需要编辑的列 edit ...

随机推荐

  1. 【hdoj_1042】N!(大数)

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1042 题目说明待求阶乘的数最大为10000,而10000!的位数为35660(这个数是上网查的),所以已经 ...

  2. 第六章:加载或保存JSON数据

    加载或保存JSON数据 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地存储需要序列化数据),交换数据最方便的就是使用JSON格式 – 大多 ...

  3. 第二章:监控属性(Observables)

    关于Knockout的3个重要概念(Observables,DependentObservables,ObservableArray),本人无法准确表达它的准确含义,所以暂定翻译为(监控属性.依赖监控 ...

  4. 【笔试题】Java 中如何递归显示一个目录下面的所有目录和文件?

    笔试题 Java 中如何递归显示一个目录下面的所有目录和文件? import java.io.File; public class Test { private static void showDir ...

  5. angular4 动态Form中获取表单字段并在页面中使用的方法

    主要有两种方式 第一种 使用get属性 页面中使用如下: 第二种 使用普通方法事件  页面中使用如下 *转载请附出处

  6. freemarker${}包含${}

    ${}包含${} freemarker还是比较只能的,只是你自己复杂化了 比如有两个集合 books跟users 你可以这么取值吗,索引是有关联关系的 <#list users as user& ...

  7. JSP中的9大内置对象四大域与servlet里的三大域

    九大内置对象 隐式对象 说明 out 转译后对应JspWriter对象,其内部关联一个PringWriter对象 request 转译后对应HttpServletRequest/ServletRequ ...

  8. 【3.16高一(第二学期)模拟测试】 T3,T4题解

    看到这个标题我想你一定会想为什么小编只发T3,T4的题解,原因有很多:1)小编也不怎么会讲:2)小编搜遍各大OJ,都没有找到可以提交的地方:3)虽然给了测试数据,小编懒得一个一个试.如果你找到了测评网 ...

  9. XAML实时显示更新插件LiveXAML

     XAML实时显示更新插件LiveXAML LiveXAML是Visual Studio的第三方扩展插件.该插件可以从Visual Studio Marketplace下载,也可以从官网下载http: ...

  10. shell中的cat和文件分界符(<<EOF) (转)

    原文地址: http://blog.csdn.net/mosesmo1989/article/details/51123257 在shell中,文件分界符(通常写成EOF,你也可以写成FOE或者其他任 ...