jquery完成带单选按钮的表格行高亮显示

上篇博客写的是复选框的,这次写的是单选框的,有时查询的时候,只能选择一条记录,如果将选中的这条记录的行高亮显示,同时该行的单选按钮也被选中了,这样会提高用户的体验的。如今的时代,就是用户体验的时代。

效果如下:

CSS文件如下如下所示:

  1. .selected{
  2. background:#FF6500;
  3. color:#fff;
  4. }:

这次的js文件的代码就变得更简单了,如下所示:

  1. /**
  2. * 设置含有单选按钮的表格的背景颜色
  3. */
  4. $(document).ready(function()
  5. {
  6. /**
  7. * 表格单击的时候改变背景色
  8. */
  9. $("#tablight tr:gt(0)").click(function() //获取第2行及以后的
  10. {
  11. $(this).addClass("selected").siblings().removeClass("selected").end().find(":radio").attr("checked",true);
  12. });
  13. });

如果想要使代码生效,需要给表格加上id属性,属性值为“tablight”。这个一旦做好了,只要在用的时候引用这两个文件就行了。

jquery完成带单选按钮的表格行高亮显示的更多相关文章

  1. jquery完成带复选框的表格行高亮显示

    jquery完成带复选框的表格行高亮显示 通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时 ...

  2. 小谢第36问:elemet - table表格修改后表格行高亮显示且定位到当前行当前页

    第一次做这个需求得时候很乱,总是在表格页和修改页徘徊,总觉得什么都会,但是就是做不出自己想要得效果 其实如果先把思路搞清楚,这个问题得知识点却是不多,以下是我对表格高亮显示得思路: 首先,我会从已知得 ...

  3. jQuery动态添加和删除表格行

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  4. 表格行与列mouse经过时高亮显示

    Insus.NET有在asp.net mvc应用程序,练习jQuery与css时,实现了<表格行mouse经过时高亮显示>http://www.cnblogs.com/insus/p/37 ...

  5. jQuery 删除行(带跨行的表格)

    jQuery 删除行(带跨行的表格) 实现效果,点击删除按钮后,在保证原来表格结构的基础上,移除当前行. 代码原理: 1.点击行后判断当前行的第一个<td>,是否包含rowspan属性,如 ...

  6. JQuery EasyUI DataGrid根据条件设置表格行样式(背景色)

    1.javascript定义函数返回样式 <script type="text/javascript"> //根据条件设置表格行背景颜色 function setRow ...

  7. JS实战 · 表格行颜色间隔显示,并在鼠标指定行上高亮显示

    思路: 1.获取所有行对象,将需要间隔颜色显示的行对象进行动态的className属性指定:      前提是:先定义好类选择器,就是说给行对象赋予name. 2.高亮用到两个事件:onmouseov ...

  8. jquery 动态添加表格行

    jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...

  9. jQuery实现表格行的动态增加与删除(改进版)

    之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故 ...

随机推荐

  1. RedMine项目管理系统安装问题(Linux版一键安装包)

    安装环境 操作环境:VMware下安装的Parrot Security OS 系统 使用软件:bitnami-redmine---linux-x64-installer.run 问题描述: 安装步骤与 ...

  2. 数据关联分析 association analysis (Aprior算法,python代码)

    1基本概念 购物篮事务(market basket transaction),如下表,表中每一行对应一个事务,包含唯一标识TID,和购买的商品集合.本文介绍一种成为关联分析(association a ...

  3. 部分常见ORACLE面试题以及SQL注意事项

    部分常见ORACLE面试题以及SQL注意事项 一.表的创建: 一个通过单列外键联系起父表和子表的简单例子如下: CREATE TABLE parent(id INT NOT NULL, PRIMARY ...

  4. innodb b+树

    http://www.admin10000.com/document/5372.html

  5. 存储过程 分页【NOT IN】和【>】效率大PK 千万级别数据测试结果

    use TTgoif exists (select * from sysobjects where name='Tonge')drop table Tongecreate table Tonge( I ...

  6. HAOI2007 理想的正方形

    1047: [HAOI2007]理想的正方形 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1402  Solved: 738[Submit][Sta ...

  7. angularJS $resource与后台restapi的对应关系

    REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格.RESTful风格的设计不仅 ...

  8. 【转】Windows搭建Eclipse+JDK+SDK的Android

    原文网址:http://blog.csdn.net/sunboy_2050/article/details/6336480 一 相关下载 (1) Java JDK下载: 进入该网页: http://j ...

  9. C#编写 "Hello,Word!" 您的第一个程序。

    教程 下面的示例展示编写C#“Hello World”程序的几种不同的方法. 示例 1 //Hello1.cs public class Hello1 { public static void Mai ...

  10. Linux Add a Swap File

    http://www.cyberciti.biz/faq/linux-add-a-swap-file-howto/ Procedure To Add a Swap File Under Linux Y ...