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

通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时,将复选框所在的行的记录删除。在这的地方,可以加个特效,单击某行的同时将该行的复选框选中,该行的背景色也高亮显示。这样给人的感觉非常好。

效果如下:

我做的这里有两个功能:

功能1、单击某行,该行的复选框被选中,同时改变一下背景色。

功能2、单击全选/全不选标签后,改变行的颜色。

两个功能我封装到了js文件中,使用的时候引入就行了。

先看一下CSS的代码,我封装到了一个css文件中

.selected{
background:#FF6500;
color:#fff;
}

在看js文件的代码:

功能1的代码:

/**

 * 设置含有复选框的表格中的背景色

 */

$(document).ready(function()

{

       /**

        * 表格行被单击的时候改变背景色

        */

       $("#tablight tr:gt(0)").click(function() //获取第2行后

       {

              if ($(this).hasClass("selected"))//判断是否选中

              {

                     $(this).removeClass("selected").find(":checkbox").attr("checked",false);//选中移除样式

              }

              else//设置选中

              {

                     $(this).addClass("selected").find(":checkbox").attr("checked",true);//未选中添加样式

              }

       });

});

功能2的代码:

/**

 * 单击全选和反选之后改变背景色

 */

function setColor()//设置tr的背景颜色

{

       var checkboxs = $("#tablight tr:gt(0) input[type=checkbox]");//得到所有的复选框

       var boxeds = $("#tablight tr:gt(0) input[type=checkbox]:checked");//得到被选择的复选框

       if(boxeds.length > 0)

       {

              checkboxs.parent().parent().addClass("selected");//复选框在td里

       }

       else

       {

              checkboxs.parent().parent().removeClass("selected");

       }

}

如果想要使代码生效,需要给表格加上id属性,属性值为“tablight”,同时全选/全不选之后调用setColor方法就行了。

jquery完成带复选框的表格行高亮显示的更多相关文章

  1. jQuery学习笔记(6)--复选框控制表格行高亮

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  2. 雷林鹏分享:jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单

    jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单 easyui 的树(Tree)插件允许您创建一个复选框树.如果您点击一个节点的复选框,这个点击的节点信息将向上和向下继承.例如:点击 ...

  3. jquery点击复选框触发事件给input赋值

    体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/31.htm 代码如下: <!DOCTYPE html> <html xmlns=" ...

  4. extjs 点击复选框在表格中增加相关信息行

    功能效果:点击复选框在表格中自动增加相关信息行,复选框取消则表格中内容自动删除 初始效果大概是这样~~~~~ // 定义初始 存放表格数据 var gridItems = []; //省份复选框 va ...

  5. jQuery选取所有复选框被选中的值并用Ajax异步提交数据

    昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来 ...

  6. C# 读带复选框的excel,写excel并设置字体、边框、背景色

    这是一篇excel读写功能大汇总,通过C#调用Microsoft.Office.Interop.Excel.dll才能完成任何复杂格式excel的读写操作. 本文需要读取的excel格式如下: 可见表 ...

  7. JQuery Mobile - 修改复选框的选中状态无效解决办法!

    今晚,在编写JQuery Mobile程序时候,需要在代码里面控制复选框的选中状态,很简单的代码啊,很快完成了!等测试程序时候傻眼了,页面无论如何也不按照我写的代码显示出来!问题出在哪里呢?是我写的控 ...

  8. 使用JQuery做一组复选框的功能。

    之前做过复选框的功能,奈何笔记丢失,害的我又鼓捣了一番...还是博客园做笔记比较好. 假设现在有一个表格,每一行都有一个复选框按钮.在表头还有一个全选的复选框按钮. ①.当点击一个全选按钮时,下面的同 ...

  9. 【jQuery】对于复选框操作的attr与prop

    这个是在jQuery1.6版本号之后出现的鬼东西.受影响的主要有下拉列表select与复选框checkbox.众所周知.在jQuery中能够用attr()取出节点的属性,然而对于checkbox却不是 ...

随机推荐

  1. [codility]Min-abs-sum

    https://codility.com/demo/take-sample-test/delta2011/ 0-1背包问题的应用.我自己一开始没想出来.“首先对数组做处理,负数转换成对应正数,零去掉, ...

  2. 文件结束符和C\C++读取文件方式

    http://www.cnblogs.com/cvbnm/articles/2003056.html 约定编译器为 gcc2/x86: 所以 char, unsigned char 为 8 位, in ...

  3. std::remove

    #include <algorithm> template< class ForwardIt, class T > ForwardIt remove( ForwardIt fi ...

  4. Android 动态Tab分页效果

    当前项目使用的是TabHost+Activity进行分页,目前要做个报表功能,需要在一个Tab页内进行Activity的切换.比方说我有4 个Tab页分别为Tab1,Tab2,Tab3,Tab4,现在 ...

  5. android 电容屏(二):驱动调试之基本概念篇

    平台信息: 内核:linux3.4.39系统:android4.4 平台:S5P4418(cortex a9) 作者:瘋耔(欢迎转载,请注明作者) 欢迎指正错误,共同学习.共同进步!! 关注博主新浪博 ...

  6. 不只是技术!成为IT经理必备的十大软技能

    摘要:可能你是一名普通的IT从业员,一个小小的程序员,可随着社会的发展和科技的进步,对人才的要求越来越高,你可能通过技术获得了职位,但你若想升职加薪却少不了软技能:谈判技巧.积极倾听.演讲技巧以及领导 ...

  7. [ffmpeg 扩展第三方库编译系列] frei0r mingw32 下编译问题

    在编译安装frei0r的时候遇到两个错误地方, 两个都是在install的时候. 一开始编译都很顺利,输入了 make install之后就走开了,回来一看,报错误. 提示mkdir -p //usr ...

  8. C++静态成员变量和静态成员函数小结

    静态类成员包括静态数据成员和静态函数成员两部分. 一 静态数据成员: 类体中的数据成员的声明前加上static关键字,该数据成员就成为了该类的静态数据成员.和其他数据成员一样,静态数据成员也遵守pub ...

  9. 三个入侵的必备小工具-lcx.exe、nc.exe、sc.exe

      lcx.exe的使用方法 以前抓肉鸡都是通过1433弱口令,然后.. 但是发现很多服务器开了1433,3389,但是终端是连不上的,因为服务器本身是在内网,只对外开放了1433端口,幸好有lcx. ...

  10. bzoj1084: [SCOI2005]最大子矩阵

    dp.状态转移方程在代码里 #include<cstdio> #include<algorithm> #include<cstring> using namespa ...