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复制内容到剪切板的实例代码(兼容IE与火狐)
Nov 19 Javascript
js中settimeout方法加参数
Feb 28 Javascript
Javascript验证上传图片大小[前台处理]
Jul 18 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
详解Vue SPA项目优化小记
Jul 03 Javascript
vue 对axios get pust put delete封装的实例代码
Jan 05 Javascript
详解Vue的列表渲染
Nov 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
PHP中鲜为人知的10个函数
2014/02/28 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
js数组实现权重概率分配
2017/09/12 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
Python递归遍历列表及输出的实现方法
2015/05/19 Python
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
Python面向对象编程基础解析(一)
2017/10/26 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
美国医生配方营养补充剂供应商:Healthy Directions
2019/07/10 全球购物
担保书格式及范文
2014/04/01 职场文书
培训科主任岗位职责
2014/08/08 职场文书
代收款委托书范本
2014/10/01 职场文书
店面出租协议书范本
2014/11/28 职场文书
发布会邀请函
2015/01/31 职场文书
Python上下文管理器Content Manager
2021/06/26 Python
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python