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 相关文章推荐
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
jQuery 表格工具集
Apr 25 Javascript
JavaScript高级程序设计 扩展--关于动态原型
Nov 09 Javascript
EasyUI 中 MenuButton 的使用方法
Jul 14 Javascript
js随机颜色代码的多种实现方式
Apr 23 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
jquery拼接ajax 的json和字符串拼接的方法
Mar 11 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
基于javascript实现日历功能原理及代码实例
May 07 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
摩卡咖啡
2021/03/03 咖啡文化
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
php cookie使用方法学习笔记分享
2013/11/07 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
jQuery 动画弹出窗体支持多种展现方式
2010/04/29 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
用Python编写web API的教程
2015/04/30 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
简述Python2与Python3的不同点
2018/01/21 Python
python自动发送邮件脚本
2018/06/20 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
Python 实现两个服务器之间文件的上传方法
2019/02/13 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
联想马亚西亚官方网站:Lenovo Malaysia
2018/09/19 全球购物
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
化学学院毕业生自荐信范文
2013/12/17 职场文书
两只小狮子教学反思
2014/02/05 职场文书
创先争优一句话承诺
2014/05/29 职场文书
献爱心标语
2014/06/21 职场文书
经理助理岗位职责
2015/02/02 职场文书
五年级语文教学反思
2016/03/03 职场文书
vue css 相对路径导入问题级踩坑记录
2022/06/05 Vue.js