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

<!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. js中“==”与"==="的区别

    首先,== equality 等同,=== identity 恒等. ==, 两边值类型不同的时候,要先进行类型转换,再比较. ===,不做类型转换,类型不同的一定不等. 一言以蔽之:==先转换类型再 ...

  2. 正则指引-量词demo

    class Program { static void Main(string[] args) { string str = "1\"3"; var re1 = Rege ...

  3. Windows下干活儿辅助软件

    桌面下高速文件搜索软件:Listary Pro(收费)和Everything(开源免费),Everything推荐Beta版,明显比老旧的稳定版好用. 桌面太乱,可以试试Fences(收费). 需要文 ...

  4. 前端经常使用插件使用文档 以及demo

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...

  5. AX2012 R3升级CU8的一些错误

    AX2012 R3安装升级包CU8后进入系统,系统会提示打开软件升级清单“Software update checklist”,清单列出了升级要做的一系列动作. 在进行到编译应用时“Compile a ...

  6. IE11 Enterprise Mode

    对IE11引入的Enterprise Mode进行了一些总结,对查阅的一些参考资料直接引用了英文,需要注意的地方用中文进行了一些注解.供大家参考. 1. The purpose of introduc ...

  7. Sql Server：不允许 ASSIGNMENT 语句中包含 FOR XML 子句

    编写函数的时候遇到“不允许 ASSIGNMENT 语句中包含 FOR XML 子句”错误,开始以为数据库函数里不可以写 FOR XML 子句,仔细看了看总觉得这么写别扭索性改了一种写法就通过了. BE ...

  8. Eplan 2D安装版布局，部件、端子竖放

    部件竖放,不是通过变量的选择实现,而是通过设置实现的,具体设置在: 选项-设置-用户-2D安装板布局: 部件方向-更改为 垂直 部件放置-旋转角度-更改为90° 这样在连续放置部件的时候就变为竖放了, ...

  9. java之final关键字

    final关键字(可以读不可以写.只读) 1.final的变量的值不能够被改变 ①.final的成员变量 ②.final的局部变量(形参) //意思是“实参”一旦传进我的方法里面,就不允许改变 2.f ...

  10. Ubuntu中QT使用FFmpeg的奇怪问题

    FFmpeg都已经编译安装好了,QT的程序中调用av_register_all却总是在链接阶段报错,经过长时间的摸索,发现时静态链接库的问题,网上给出的答案都只能解决部分问题,所需的全部链接库如下: ...