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

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

效果如下:

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”。这个一旦做好了,只要在用的时候引用这两个文件就行了。

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. java:I/O 一行一行读取和写入

    BufferedReader逐行读取 import java.io.*; class Test { public static void main(String args []){ FileReade ...

  2. Android:控件ProgressBar进度条

    各种进度条属于 ProgressBar的子类 设置style: 环形进度条   style="?android:attr/progressBarStyleLarge" 横向进度条, ...

  3. Permutation Test 置换检验(转)

    Permutation Test 置换检验 显著性检验通常可以告诉我们一个观测值是否是有效的,例如检测两组样本均值差异的假设检验可以告诉我们这两组样本的均值是否相等(或者那个均值更大).我们在实验中经 ...

  4. zoj 3351 Bloodsucker(概率 dp)

    题目:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=4530 dp[i]表示现在存在i个吸血鬼要达成目标(全为吸血鬼)天数的数学 ...

  5. 实现sqrt()函数

    求一个正数N的开方, 并且可以指定精度, 要求不能用库函数sqrt 方法一:如下所示,先求sqrt(N)的整数部分,再求小数点后1位,2位 ... ... 方法二:牛顿迭代法,根据公式 Ai+1 = ...

  6. Android Material Design简单使用

    吐槽 作为一个 Android developer,没有什么比拿着 UI 设计的一堆 iOS 风格的设计 来做需求更恶心的了,基本所有空间都要照着 iOS 来画一遍,Material Design 辣 ...

  7. Entity Framework Code First级联删除

    如果我们要到一对主从表增加级联删除,则要在主表中的引用属性上增加Required关键字,如: public class Destination { public int DestinationId { ...

  8. JS分页 + 获取MVC地址栏URL路径的最后参数

    @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...

  9. InnoDB关键特性之doublewrite

    部分写失效 想象这么一个场景,当数据库正在从内存向磁盘写一个数据页时,数据库宕机,从而导致这个页只写了部分数据,这就是部分写失效,它会导致数据丢失.这时是无法通过重做日志恢复的,因为重做日志记录的是对 ...

  10. 【C/C++运行时库】 /MT /MTd /MD /MDd对C/C++运行库的影响

    欢迎转载 转载请注明出处:http://www.cnblogs.com/cuish/p/3146937.html 测试VS中[项目属性]-[C/C++]-[代码生成]选项中的[运行库]- [ /MT, ...