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 相关文章推荐
仿服务器端脚本方式的JS模板实现方法
Apr 27 Javascript
javascript之卸载鼠标事件的代码
May 14 Javascript
Javascript 面向对象特性
Dec 28 Javascript
div+css布局的图片连续滚动js实现代码
May 04 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
基于BootStarp的Dailog
Apr 28 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
Angularjs之如何在跨域请求中传输Cookie的方法
Jun 01 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 Javascript
vue2.0 路由模式mode="history"的作用
Oct 18 Javascript
基于Vant UI框架实现时间段选择器
Dec 24 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站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
python实现发送邮件及附件功能
2021/03/02 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
python实现黑客字幕雨效果
2018/06/21 Python
解决Pycharm后台indexing导致不能run的问题
2019/06/27 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
python实现AdaBoost算法的示例
2020/10/03 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
智利最大的网上商店:Linio智利
2016/11/24 全球购物
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
《画风》教学反思
2014/04/16 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
昆虫记读书笔记
2015/06/26 职场文书
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python
mysql 获取时间方式
2022/03/20 MySQL
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python