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 相关文章推荐
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
读jQuery之二(两种扩展)
Jun 11 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
Dec 29 Javascript
BootStrap中Datepicker控件带中文的js文件
Aug 10 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
PHP防盗链代码实例
2014/08/27 PHP
PHP判断来访是搜索引擎蜘蛛还是普通用户的代码小结
2015/09/14 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
PHP实现的装箱算法示例
2018/06/23 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
深入浅析JSONAPI在PHP中的应用
2017/12/24 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
Python的Django框架中的表单处理示例
2015/07/17 Python
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
windows下Python实现将pdf文件转化为png格式图片的方法
2017/07/21 Python
python3.6环境安装+pip环境配置教程图文详解
2019/06/20 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
食品安全检查制度
2014/02/03 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
计算机实训报告范文
2014/11/05 职场文书
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL
Go 内联优化让程序员爱不释手
2022/06/21 Golang