在项目中有这样一个需求，在table中移动鼠标时，鼠标所在行高亮显示，其他行正常显示，为此做了一个模拟。

具体代码如下：

<!DOCTYPE html>

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

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        body {

            border: none;

            padding: 0px;

            text-align: center;

        }

        table {

            flex-align: center;

            text-align: center;

            border: 0px;

            border-spacing: 0px;

            border-collapse: collapse;

        }

            table tr {

                border: 0px;

                background: url(images/1.jpg) repeat;

            }

        table, tr, td {

            width: 450px;

            height: 50px;

            border-spacing: 0px;

            margin: 0px;

            padding: 0px;

            border: 1px solid red;
        }

 </style>

    <script src="jquery-1.10.2.js"></script>

    <script type="text/javascript">

        $(function () {

            $('#tablem tr').css('background', 'url(images/1.jpg) repeat');

            $('#tablem tr').mouseover(function () {

                $(this).css('background', 'url(images/2.jpg) repeat').siblings().css('background', 'url(images/1.jpg) repeat');

            });

        });

 </script>

<body>

    <table id="tablem">

        <tr>

　　          <td>11</td>

            <td>12</td>

            <td>13</td>

            <td>14</td>

        </tr>

        <tr>

            <td>21</td>

            <td>22</td>

            <td>23</td>

            <td>24</td>

        </tr>

        <tr>
            <td>31</td>

            <td>32</td>

            <td>33</td>

            <td>34</td>

        </tr>

        <tr>

            <td>41</td>

            <td>42</td>

            <td>43</td>

            <td>44</td>

        </tr>

        <tr>

            <td>51</td>

            <td>52</td>

            <td>53</td>

            <td>54</td>

        </tr>

    </table>

</body>

</html>

显示结果如下：

模拟在table中移动鼠标，高亮显示鼠标所在行的更多相关文章

  1. css实现table中td单元格鼠标悬浮时显示更多内容

    table中,td单元格无法显示下全部内容,需要在鼠标hover时显示全部内容. 正常显示样式: 鼠标hover时: html: <td>displayAddress<span cl ...

  2. 模拟在table中移动鼠标，高亮显示鼠标所在行，固定表头

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  3. 使用VUE实现在table中文字信息超过5个隐藏，鼠标移到时弹窗显示全部

    使用VUE实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部 <template> <div> <table> <tr v-for="i ...

  4. 使用html及CSS实现在table中文字信息超过5个隐藏，鼠标移到时弹窗显示全部：

    使用html及CSS实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部: <!DOCTYPE html><html lang="en">< ...

  5. 在Mockplus中，如何做鼠标悬停时菜单下拉的效果？

    了解Mockplus的用户会知道,该原型工具目前并不直接支持鼠标悬停功能.但我经过尝试,发现想用它实现一个鼠标悬停事件并不是什么难事,比如网页设计中很常见的鼠标悬停时菜单下拉的效果,只要换个思路,利用 ...

  6. WPF 窗体中获取键盘和鼠标无操作时的超时提示

    原文:WPF 窗体中获取键盘和鼠标无操作时的超时提示 通过调用Windows API中的GetLastInputInfo来获取最后一次输入的时间 , , );            timer.Tic ...

  7. jquery 在 table 中修改某行值

    修改 table 中某行的的方法步骤如下: 1.选择要修改的行,事件触发,比如我的 双击某行时修改 2.将要修改的行,替换为input,原先的列中的值,需要放到对应的input中作为默认值 3.修改完 ...

  8. [easyui] - 在easyui的table中展示提示框

    因为在easyui的table中字段过多,而无法展示全时,被迫只能使用这个方法. 使用方式: 在 $('#dg').datagrid({ 后的 queryParams: form2Json('sear ...

  9. REACT 使用antd Table 中rowSelection遇到的问题

    首先项目是尚硅谷的后台谷粒平台,在用到antd Table 中的 rowSelection时,出现了一个问题(P87时遇到的问题): 表格中的每一项前面有一个radio单选框可以选中,本来是想利用ro ...

随机推荐

  1. 图解 CSS: 理解样式表的逻辑（转载）

    原文:http://www.cnblogs.com/del/archive/2009/02/01/1382141.html 样式表可以是外部的.内联的或嵌入的; 链接外部样式文件一般是:<lin ...

  2. Boost的自动链接功能

    Boost是一个强大的C++第三方库,但是Boost的各种问题实在是很让人蛋疼.我搜到过一篇文章关于LuaBind使用Boost Build管理工具来管理源代码以及编译的博文,其第一句话就是Fuck ...

  3. MAC 平台 QT编写iphone程序，加载iphone模拟器失败解决办法

    本日这么多年一直做C++开发,最近要做QT项目,被QT做界面的新特性所吸引.QSS QML的确是亮点. 还有一个就是跨平台这方面,自己玩了玩. 用的QT 的开发包是在官网上下载 qt-opensour ...

  4. C# Double toString保留小数点方法

    有时候double型数据需要toString(),但又想保留小数,当值为整数,比如3.00时tostring后会变为”3″,具体说明见下: 1 string str0 = i.ToString(&qu ...

  5. dbutils 执行sql返回的数据类型

    //ArrayHandler: 把结果集中的第一行数据转成对象数组 //ArrayListHandler:把结果集中的每一行数据都转成一个对象数组,再存放到List中 //BeanHandler:将结 ...

  6. IntelliJ IDEA 调试小记

    一.IntelliJ IDEA 调试没有F6 Eclipse调试有F6,意为下一步,递增F8.可IntelliJ IDEA 调试没有这个. 二.图解 Step Over (F8): 下一步 (相当于E ...

  7. 【UOJ】【34】多项式乘法

    快速傅里叶变换模板题 算法理解请看<算法导论>第30章<多项式与快速傅里叶变换>,至于证明插值唯一性什么的看不懂也没关系啦-只要明白这个过程是怎么算的就ok. 递归版:(425 ...

  8. android 解析XML方式（二）

    上一节中,我们使用DOM方式解析xml文档,该方式比较符合我们日常思维方式,容易上手,但是它直接把文档调入内存中,比较耗内存.在这里我们可以用另外一种方式解析xml,这个就是SAX方式. SAX即是: ...

  9. 原 Linux搭建SVN 服务器

    原 Linux搭建SVN 服务器 发表于1年前(2014-08-05 17:55)   阅读(12257) | 评论(3) 31人收藏此文章, 我要收藏 赞3 摘要 Linux搭建SVN 服务器 目录 ...

  10. linux网卡速率和双工模式的配置

    linux网卡速率和双工模式的配置 (2012-09-06 14:39:57) 转载▼ 标签: 科技 网络接口 协商 网卡 工具 it 分类: Linux 改变网络接口的速度和协商方式的工具miito ...