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

<!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. [开发笔记]-MarkDown语法

    马克飞象MarkDown在线编辑器 http://maxiang.info/?basic 1. H1--H6 相应数量的# 2. 底线形式 = H1(最高阶标题)和- H2(第二阶标题) 3. 段落和 ...

  2. 简单的freemarker解析测试

    本文是一个很简单很基础的Freemarker模板解析测试类,复杂的也是在此基础上添加一些代码优化而来,懂得基础流程后就能融会贯通了 POM: <dependency> <groupI ...

  3. 封装一个UILabel圆形边框显示进度

    封装了一个UILabel并让它显示圆形的边框,UILabel上面显示百份比,而边框则用Animation绘制到整个圆占指定百分比的点. 这只是我个人想的继承一个UILabel实现的,用到两个CASha ...

  4. Java 部分排序算法

    . import java.io.*;import java.math.*;import java.util.*;public class Algr{ public static int array[ ...

  5. Android手机的 storage

    老外的一段解释 -------------------------------------------------------------------------------------------- ...

  6. 【总结】编写自己的JDBC框架

    一.数据库连接池: 在一般用JDBC 进行连接数据库进行CRUD操作时,每一次都会: 通过:java.sql.Connection conn = DriverManager.getConnection ...

  7. hibernate下载包中配置文件路径

    路径:hibernate-release-5.0.2.Final\project\hibernate-ehcache\src\test\resources\hibernate-config 文件:hi ...

  8. IOS UITableView下拉刷新和上拉加载功能的实现

    在IOS开发中UITableView是非常常用的一个功能,而在使用UITableView的时候我们经常要用到下拉刷新和上拉加载的功能,今天花时间实现了简单的UITableView的下拉刷新和上拉加载功 ...

  9. Android界面布局基本属性

    在 android 中我们常用的布局方式有这么几种:1.LinearLayout ( 线性布局 ) :(里面只可以有一个控件,并且不能设计这个控件的位置,控件会放到左上角)              ...

  10. python watchdog

    监视文件变更 #!/usr/bin/python # -*- coding:UTF-8 -*- import time from watchdog.observers import Observer ...