对于一个表格，为了使我们选中的项更容易区分，需要为选中项添加高亮，同时也需要，将其他项的高亮形式去除。类似于：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title></title>

    <link href="css/style.css" rel="stylesheet" type="text/css" />

    <script src="jquery-1.3.2.min.js"></script>

    <script>

        $(function () {

            $('tbody>tr').click(function () {

                $(this).addClass('selected')      //为选中项添加高亮

                .siblings().removeClass('selected')//去除其他项的高亮形式

                .end();

            });

        });

    </script>

</head>

<body>

    <table>

        <thead>

            <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>

        </thead>

        <tbody>

            <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>

            <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>

            <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>

            <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>

            <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>

        </tbody>

    </table>

</body>

</html>

jquery实现表格中点击相应行变色功能的更多相关文章

  1. Switch开关在element-ui表格中点击没有效果解决方法

    <el-table-column label="三审" align="center"> <template slot-scope=" ...

  2. [转载]GridView中点击某行的任意位置就选中该行

    原文链接:http://www.cnblogs.com/Echo529/p/4521701.html GridView中点击某行的任意位置就选中该行 分类: 第一步:添加选择列 点击GridView右 ...

  3. GridView中点击某行的任意位置就选中该行

    GridView中点击某行的任意位置就选中该行 -- :: 分类: 第一步:添加选择列 点击GridView右边小尖头,双击CommandField,选中＂选择＂,添加,将起设置为不可见: 第二步:处 ...

  4. 利用jQuery实现鼠标滑过整行变色

    在很多网站都有这样的效果,那就是当鼠标放在新闻列表一行上的时候,整行就会变色,虽然使用CSS也能够实现此种功能,但是由于众多浏览器版本对于CSS3并没有良好的支持,所以在当前情况下,使用jQuery实 ...

  5. QT中Qtableview视图表格中点击表头进行排序

    用QT写了一个小工具,主要是对Excel中大量的数据进行计算和显示. 写了有一段时间,然后断断续续的做一些修改和完善. 因为要显示的数据有多列,很自然的会想到要能够对显示的数据进行排序.如果直接操作m ...

  6. 关于table表格中点击一个按钮获取该行的某一列的值并将其传到模态框的问题解决

    <tbody> {% for item in all_dataset %} <tr> <td>{{ item.nid }}</td> <td> ...

  7. jquery——左右按钮点击切换一组图片功能

    一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮 ...

  8. jquery 实现鼠标点击div盒子移动功能

    // Start 窗口的拖动 var _move=false; //移动标记 var _x,_y; //鼠标离控件左上角的相对位置 $(document).ready(function(){ $(&q ...

  9. jQuery实现表格隔行换色且感应鼠标高亮行变色

    jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...

随机推荐

  1. 连接的世界 - LTE时代产业趋势和战略分析

    连接的世界 - LTE时代产业趋势和战略分析 作者:华为有线技术公司李常伟 2014-09-22 信息产业发展解放的核心是这个世界连接的方式.由语音到数据.由通信到情感.由人的连接到物的连接.由“哑” ...

  2. Window 通过cmd查看端口占用、相应进程、杀死进程等的命令【转】

    一. 查看所有进程占用的端口  在开始-运行-cmd,输入:netstat –ano可以查看所有进程 二.查看占用指定端口的程序  当你在用tomcat发布程序时,经常会遇到端口被占用的情况,我们想知 ...

  3. Flink 剖析

    1.概述 在如今数据爆炸的时代,企业的数据量与日俱增,大数据产品层出不穷.今天给大家分享一款产品—— Apache Flink,目前,已是 Apache 顶级项目之一.那么,接下来,笔者为大家介绍Fl ...

  4. asihttprequest本机调试时正常，发布后闪退

    "Compile sources" -->"Build Phases" 找到ASIFormDataRequest.m和ASIHTTPRequest.m,修 ...

  5. lua中得栈

    如果你看了LUA的文档,那么就应该很清楚LUA与C交互数据时都是用到LUA中所谓的stack.那么当我调用lua_open函数之后栈是什么样的呢?空的(luaopen_base等会往栈上加进一些东西) ...

  6. 头文件 string.h cstring string 区别

    1.#include <cstring>   //不可以定义string s:可以用到strcpy等函数using   namespace   std; #include <stri ...

  7. Mysql 导入数据，推荐Source命令，太快了

    http://jingyan.baidu.com/article/cbf0e500d15c762eab289362.html

  8. jsp页面间传递参数 中文乱码问题(zz)

      jsp页面间传递参数 中文乱码问题 1.传递参数 var url = "*****Test.jsp?param1="+encodeURI(encodeURI(str));//对 ...

  9. 读书笔记_Effective_C++_条款四十九：了解new_handler的行为

    本章开始讨论内存分配的一些用法,C/C++内存分配采用new和delete.在new申请内存时,可能会遇到的一种情况就是,内存不够了,这时候会抛出out of memory的异常.有的时候,我们希望能 ...

  10. Struts2知多少（2） Struts2 是什么

    Struts2是流行和成熟的基于MVC设计模式的Web应用程序框架. Struts2不只是Struts1下一个版本,它是一个完全重写的Struts架构. WebWork框架开始以Struts框架为基础 ...