jquery实现带单选按钮的表格行选中时高亮显示


Posted in Javascript onAugust 01, 2013

上篇博客写的是复选框的,这次写的是单选框的,有时查询的时候,只能选择一条记录,如果将选中的这条记录的行高亮显示,同时该行的单选按钮也被选中了,这样会提高用户的体验的。如今的时代,就是用户体验的时代。

效果如下:
CSS文件如下如下所示:

.selected{ 
background:#FF6500; 
color:#fff; 
}:

这次的js文件的代码就变得更简单了,如下所示:
/** 
* 设置含有单选按钮的表格的背景颜色 
*/ 
$(document).ready(function() 
{ 
/** 
* 表格单击的时候改变背景色 
*/ 
$("#tablight tr:gt(0)").click(function() //获取第2行及以后的 
{ 
$(this).addClass("selected").siblings().removeClass("selected").end().find(":radio").attr("checked",true); 
}); 
});

如果想要使代码生效,需要给表格加上id属性,属性值为“tablight”。这个一旦做好了,只要在用的时候引用这两个文件就行了。
Javascript 相关文章推荐
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 Javascript
Backbone.js的Hello World程序实例
Jun 19 Javascript
JavaScript多并发问题如何处理
Oct 28 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
Mar 16 Javascript
动态加载js文件简单示例
Apr 21 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
深入浅析JavaScript中的Function类型
Jul 09 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
JavaScript定时器详解及实例
Aug 01 #Javascript
js渐变显示渐变消失示例代码
Aug 01 #Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 #Javascript
JS调用CS里的带参方法实例
Aug 01 #Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 #Javascript
子窗体与父窗体传值示例js代码
Aug 01 #Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 #Javascript
You might like
php模拟js函数unescape的函数代码
2012/10/20 PHP
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
php文件上传简单实现方法
2015/01/24 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
老生常谈javascript中逻辑运算符&&和||的返回值问题
2017/04/13 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
浅谈Python基础之I/O模型
2017/05/11 Python
softmax及python实现过程解析
2019/09/30 Python
python区分不同数据类型的方法
2019/10/14 Python
python 遍历pd.Series的index和value
2019/11/26 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
网络编程中设计并发服务器,使用多进程与多线程,请问有什么区别?
2016/03/27 面试题
综合素质的自我鉴定
2013/10/07 职场文书
机关门卫岗位职责
2013/12/30 职场文书
仓库管理制度
2014/01/21 职场文书
《一株紫丁香》教学反思
2014/02/19 职场文书
安全责任书范文
2014/08/25 职场文书
企业安全隐患排查治理制度
2015/08/05 职场文书