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 文档碎片
Jul 13 Javascript
jquery中post方法用法实例
Oct 21 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
JS面向对象的程序设计相关知识小结
May 26 Javascript
小程序中this.setData的使用和注意事项
Aug 28 Javascript
Vue中函数防抖节流的理解及应用实现
Apr 24 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 Javascript
JavaScript实现表单验证功能
Dec 09 Javascript
vue实现防抖的实例代码
Jan 11 Vue.js
javascript实现点击产生随机图形
Jan 25 Javascript
vue组件的路由高亮问题解决方法
May 11 Vue.js
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 随机排序广告的实现代码
2011/05/09 PHP
PHP图片验证码制作实现分享(全)
2012/05/10 PHP
coreseek 搜索英文的问题详解
2013/06/08 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
PHP中文乱码解决方案
2015/03/05 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
javascript下数值型比较难点说明
2010/06/07 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
js操作二进制数据方法
2018/03/03 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
在Python的Django框架中创建语言文件
2015/07/27 Python
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
python绘制直线的方法
2018/06/30 Python
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
mac使用python识别图形验证码功能
2020/01/10 Python
python如何删除列为空的行
2020/07/17 Python
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
navabi英国:设计师大码女装
2019/06/25 全球购物
英国知名小木屋定制网站:Tiger Sheds
2020/03/06 全球购物
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
保护环境的建议书
2014/03/12 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang
教你怎么用python实现字符串转日期
2021/05/24 Python