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 相关文章推荐
AJAX分页的代码(后台asp.net)
Feb 14 Javascript
读jQuery之三(构建选择器)
Jun 11 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
js调用图片隐藏&显示实现代码
Sep 13 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
Jun 06 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
webix+springmvc session超时跳转登录页面
Oct 30 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 Javascript
js实现电灯开关效果
Jan 19 Javascript
vue 数字翻牌器动态加载数据
Apr 20 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
基于wordpress主题制作的具体实现步骤
2013/05/10 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
js获取url中"?"后面的字串方法
2014/05/15 Javascript
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
js匿名函数作为函数参数详解
2016/06/01 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
基于jQuery实现的设置文本区域的光标位置
2018/06/15 jQuery
angular 内存溢出的问题解决
2018/07/12 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
python抓取网页图片并放到指定文件夹
2014/04/24 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
python交易记录链的实现过程详解
2019/07/03 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
英国最大的自有市场,比亚马逊便宜:Flubit
2019/03/19 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
数据库连接池的工作原理
2012/09/26 面试题
创业计划书撰写原则
2014/01/25 职场文书
超市采购员岗位职责
2014/02/01 职场文书
党校培训自我鉴定范文
2014/04/10 职场文书
小学教师师德演讲稿
2014/05/06 职场文书
遵纪守法演讲稿
2014/05/23 职场文书
工商管理专业自荐信
2014/06/03 职场文书
客户答谢会活动方案
2014/08/31 职场文书
运动会表扬稿范文
2015/05/05 职场文书
给下属加薪申请报告
2015/05/15 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
交通事故协议书范本
2016/03/19 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
优秀创业计划书分享
2019/07/19 职场文书
python基础之函数的定义和调用
2021/10/24 Python