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 相关文章推荐
巧用replace将文字表情替换为图片
Apr 17 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
Centos7 中 Node.js安装简单方法
Nov 02 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
js实现下拉框效果(select)
Mar 28 Javascript
JS实现图片预加载之无序预加载功能代码
May 12 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
vue中的event bus非父子组件通信解析
Oct 27 Javascript
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
js实现无缝轮播图特效
May 09 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
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
javascript 写类方式之五
2009/07/05 Javascript
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
nodejs判断文件、文件夹是否存在及删除的方法
2017/11/10 NodeJs
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
2018/08/19 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
2019/04/17 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
python 元组和列表的区别
2020/12/30 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
财务简历的自我评价
2014/03/05 职场文书
学校文明单位申报材料
2014/05/06 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技