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

<!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. [译] Angular 2 VS. React： 血色将至

    Angular 2 VS. React: 血色将至 原文链接:https://medium.com/@housecor/angular-2-versus-react-there-will-be-blo ...

  2. 在Oracle Linux Server release 6.4下配置ocfs2文件系统

    ① 安装ocfs-tools-1.8 如果是使用RedHat Enterprise Linux 6.4,也可以安装ocfs-tools-1.8的,只是要插入Oracle Linux Server re ...

  3. android studio出现Error:compileSdkVersion android-x requires compiling with JDK 7问题

    初装Android studio的童鞋可能或多或少会存在一些问题,比如出现Error:compileSdkVersion android-x requires compiling with JDK 7 ...

  4. ajax 异步请求webservice(XML格式)

    function callAjaxWebservice(){ alert("call ajax"); try { $.ajax({ type: "POST", ...

  5. SQL SERVER 移动系统数据库

    移动系统数据库在下列情况下可能很有用: 故障恢复.例如,数据库处于可疑模式下或因硬件故障而关闭. 计划的重定位. 为预定的磁盘维护操作而进行的重定位. 移动 Master 数据库     在“开始”菜 ...

  6. 【redmine】密码忘了后重新设置

    有段时间没有使用,忘记了原来的密码,搜索网上有一篇文章,不过版本比较老,和现在文件位置不一样,参考后成功重置了密码,感谢原作者. 原文内第一步一般是不需要的.主要是用ruby命令修改数据库内容. 进入 ...

  7. 使用 Portable Class Library（可移植类库）开发 Universal Windows App

    今天在这里跟大家聊聊关于 Windows Universal 应用夸平台的问题,首先Universal Windows App的定义相信大家已经有所了解了(如果你是一个刚刚接触 Universal A ...

  8. 使用 crosswalk-cordova 打包sencha touch 项目，再也不用担心安卓兼容问题！

    国内的安卓手机品牌众多,安卓操作系统碎片化也很严重,我们使用sencha touch 开发的应用不可避免的出现了各种无解的兼容性问题. 有时候我就在想,有没有既能支持cordova,又能让我们把Chr ...

  9. C2C,B2C,F2C三种电商运营模式的比较

      第三方模式(C2C) 销售商模式(B2C) 生产商模式(F2C) 概念及简介 第三方平台提供商模式是电子商务的最原始也是最自然的形式.这种模式一般都是由信息技术开发商负责建立平台,利用平台扩展电子 ...

  10. 【Machine Learning】wekaの特征选择简介

    看过这篇博客的都应该明白,特征选择代码实现应该包括3个部分: 搜索算法: 评估函数: 数据: 因此,代码的一般形式为: AttributeSelection attsel = new Attribut ...