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实现拼音排序的方法
Nov 20 Javascript
Tab切换组件(选项卡功能)实例代码
Nov 21 Javascript
jQuery实用技巧必备(下)
Nov 03 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
详解html-webpack-plugin用法全解
Jan 22 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
Vue动态控制input的disabled属性的方法
Jun 26 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
详解vue-cli 脚手架 安装
Apr 16 Javascript
Vue组件基础用法详解
Feb 05 Javascript
JavaScript 声明私有变量的两种方式
Feb 05 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
destoon实现调用图文新闻的方法
2014/08/21 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
node express使用HTML模板的方法示例
2019/08/22 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
Python中的index()方法使用教程
2015/05/18 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
Python多个装饰器的调用顺序实例解析
2020/05/22 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
家电业务员岗位职责
2014/03/10 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
服务员岗位职责
2015/02/03 职场文书
大连星海广场导游词
2015/02/10 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
原生JS实现分页
2022/04/19 Javascript
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android