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 相关文章推荐
JavaScript 未结束的字符串常量常见解决方法
Jan 24 Javascript
写给想学习Javascript的朋友一点学习经验小结
Nov 23 Javascript
jquery无法设置checkbox选中即没有变成选中状态
Mar 27 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
详解vue-property-decorator使用手册
Jul 29 Javascript
vue v-for直接循环数字实例
Nov 07 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 Javascript
js实现页面导航层级指示效果
Aug 25 Javascript
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
Apache设置虚拟WEB
2006/10/09 PHP
用PHP制作静态网站的模板框架(二)
2006/10/09 PHP
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
PHP中include与require使用方法区别详解
2013/10/19 PHP
php生成QRcode实例
2014/09/22 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
javascript中replace使用方法总结
2017/03/01 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
python&MongoDB爬取图书馆借阅记录
2016/02/05 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
对python 生成拼接xml报文的示例详解
2018/12/28 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
Python双链表原理与实现方法详解
2020/02/22 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
PyQt实现计数器的方法示例
2021/01/18 Python
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
生日答谢词
2015/01/05 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书
vue修饰符.capture和.self的区别
2022/04/22 Vue.js