在项目中有这样一个需求,在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. asp.net 生成PDF方法

    今天转博客园看到有人发表了一篇生成PFd的文章,准备自己也留一份准备以后用到的时候方便调用: 首先去itextsharp网站下载控件(https://sourceforge.net/projects/ ...

  2. WPF 控件截图位置不正确的问题

    用WPF的RenderTargetBitmap可以截取控件内容到一张图片上,但是实际使用的时候经常出现截取的位置不正确的问题.今天是第二次解决这个问题,所以记录下,免得再忘了. RenderTarge ...

  3. 利用iOS API编写简单微博客户端全过程

    要编写社交网络客户端程序,可以大体上分为4个主要的步骤 下面我们按照这个流程,介绍一下: 1.引入Accounts和Social框架 工 程中需要引入Accounts和Social框架,Account ...

  4. iOS下日期的处理(世界标准时转本地时间)

    NSDate存储的是世界标准时(UTC),输出时需要根据时区转换为本地时间 Dates         NSDate类提供了创建date,比较date以及计算两个date之间间隔的功能.Date对象是 ...

  5. macos port总结

    http://stackoverflow.com/questions/733951/unable-to-download-the-source-code-of-open-source-projects ...

  6. 什么是ajax,ajax原理是什么 ,优缺点是什么

    AJAX工作原理及其优缺点   1.什么是AJAX?AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页 ...

  7. 常用的机器学习&数据挖掘知识点【转】

    转自: [基础]常用的机器学习&数据挖掘知识点 Basis(基础): MSE(Mean Square Error 均方误差),LMS(LeastMean Square 最小均方),LSM(Le ...

  8. poj 3170

    两遍bfs ~ #include <cstdio> #include <cstdlib> //#include <cmath> #include <map&g ...

  9. DelayedOperationPurgatory之purgatory的实现

    purgatory的超时检测 当一个DelayedOpeartion超时(timeout)时,它需要被检测出来,然后调用它的回调方法.这个事情看起来很简单,但做好也并不容易. 0.8.x的Kafka的 ...

  10. iOS上的jQuery.on()冒泡事件绑定 以及 iOS绝对定位元素中的输入框

    上周遇到两个坑. 一是jQuery的on方法 事件冒泡,在iOS中有问题. $("body").on("click",".contentup" ...