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 相关文章推荐
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 Javascript
js使用removeChild方法动态删除div元素
Aug 01 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
javascript生成随机数方法汇总
Nov 12 Javascript
js采用concat和sort将N个数组拼接起来的方法
Jan 21 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
Aug 17 Javascript
最新Javascript程序员面试试题和解题方法
Nov 23 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
vue点击页面空白处实现保存功能
Nov 06 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 Javascript
如何使用gpu.js改善JavaScript的性能
Dec 01 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
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
js 操作css实现代码
2009/06/11 Javascript
ExtJS下grid的一些属性说明
2009/12/13 Javascript
JavaScript为对象原型prototype添加属性的两种方式
2010/08/01 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
react 生命周期实例分析
2020/05/18 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
详解Python中的join()函数的用法
2015/04/07 Python
用python写一个windows下的定时关机脚本(推荐)
2017/03/21 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
小小商店教学反思
2014/04/27 职场文书
快餐公司创业计划书
2014/04/29 职场文书
重阳节活动总结
2014/08/27 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
《纸船和风筝》教学反思
2016/02/18 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers