`
qxmcool
  • 浏览: 93601 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

鼠标划过表格行变色

 
阅读更多

<html>
<head>
<title>鼠标划过表格行变色－简洁实现</title>
<style type="text/css">
#tb{width:666px;border-collapse:collapse;border:1px solid #EEE;font-size:14px;}
#tb th{background:#EEE;border-bottom:1px solid #CCC;padding:4px;}
#tb td{border:1px solid #EEE;padding:4px;}
</style>
</head>
<body>
<table id="tb">
<tr>
<th>商品名称</th>
<th>单价</th>
<th>库存数量</th>
<th>货位</th>
</tr>
<tr>
<td>丁学最喜欢的仙四豪华版-菱纱版</td>
<td>139</td>
<td>10000000</td>
<td>A12-253</td>
</tr>
<tr>
<td>仙四豪华版-梦璃版</td>
<td>139</td>
<td>10000000</td>
<td>A12-254</td>
</tr>
<tr>
<td>仙四普通版-首发</td>
<td>69</td>
<td>10000000</td>
<td>A12-255</td>
</tr>
</table>
<script type="text/javascript">
var obj=document.getElementById("tb");
for(var i=0;i<obj.rows.length;i++){ //循环表格行设置鼠标事件：丁学
obj.rows[i].onmouseover=function(){this.style.background="#2323FF";}
obj.rows[i].onmouseout=function(){this.style.background="";}
}
</script>
分享到：
| 复选框全选发选取消
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js实现鼠标经过表格行变色的方法

    本文将详细介绍如何使用JavaScript实现鼠标经过表格行变色的效果。 首先，我们需要理解HTML表格的基本结构。一个简单的表格由`&lt;table&gt;`元素包裹，内部包含`&lt;tr&gt;`（表格行）元素，每行内可以有多个`&lt;td&gt;`（表格数据...

    table鼠标经过时整行变色 jquery

    在网页设计中，表格（Table）是一种常见的数据...通过这种方式，你可以实现表格鼠标经过时整行变色的效果，同时保持与其他框架的兼容性。在实际应用中，可以根据需求调整颜色、动画效果等细节，以达到最佳的视觉效果。

    js 实现 鼠标经过表格时列变色

    js 实现 鼠标经过表格时列变色! 值得下载看看!资源免费,大家分享!!

    鼠标经过表格变色

    通过jquery给经过的表格设置css背景变色效果

    表格隔行换色 鼠标移过变色

    "表格隔行换色 鼠标移过变色"是两种常见的表格样式优化手段，它们可以使得表格内容更易于阅读，同时提升用户体验。在JavaScript（JS）的帮助下，我们可以轻松实现这些效果。 1. **隔行换色**： 隔行换色通常使用...

    displaytag分页和鼠标经过变色功能

    在上述例子中，我们看到了如何通过自定义装饰器 `OverOutWrapper` 实现鼠标经过表格行变色的功能。这个装饰器继承自Displaytag 提供的 `TableDecorator` 类，并重写了 `addRowId()` 方法。`addRowId()` 方法通常用于...

    js表格变色制作表格隔行变色,滑过选中变色特效

    在表格变色的场景中，我们将利用JavaScript事件监听和DOM操作来实现所需的功能。 1. **隔行变色**：这个功能可以使得表格看起来更加清晰，帮助用户更容易区分不同的行。我们可以使用JavaScript遍历表格的所有行，...

    一个简单但常用的javascript表格样式_鼠标划过行变色 简洁实现

    在JavaScript中，我们经常需要对表格进行各种操作，以增强用户体验，例如鼠标划过行变色的效果。这个效果在很多场合都非常实用，比如用户浏览数据列表时，高亮显示当前选中的行，能够帮助用户更好地追踪和理解他们...

    jQuery鼠标移动表格变色及修改单元格值

    标题中的“jQuery鼠标移动表格变色及修改单元格值”是指使用jQuery库来实现一个功能，当鼠标在HTML表格上移动时，所经过的单元格会改变颜色，并且用户能够编辑表格中的单元格值。这个功能结合了jQuery的选择器、事件...

    JavaScript实现鼠标经过表格某行时此行变色

    本文实例为大家分享了js鼠标经过表格某行时此行变色的具体代码，供大家参考，具体内容如下 表格表头为蓝色，表主体为白色，当鼠标放到表的非...鼠标经过表格变色&lt;/title&gt; &lt;style&gt; table { margin: 20

    QTableWidget 实现鼠标划过时，整行背景颜色及字体边框的变化

    在这个特定的场景中，我们关注的是如何在用户鼠标划过某一行时，实现该行背景颜色以及字体边框的变化，以提升用户的交互体验。以下将详细介绍如何实现这一功能。 首先，我们需要创建一个自定义的QTableWidget子类，...

    DataGridview 鼠标打哪哪就变色

    根据提供的文件信息，本文将详细解释如何实现DataGridView控件中鼠标悬停时行变色的效果。此功能在很多应用程序中非常实用，可以帮助用户更直观地识别当前操作的行。 ### DataGridview简介 DataGridView是.NET ...

    layui的表格table选中数据后更改本行的颜色

    总的来说，实现layui表格选中行变色的功能，主要涉及JavaScript事件监听、DOM操作以及CSS样式设置。在前后端分离的项目中，前端通过调用后端API获取数据并渲染到表格。理解并熟练运用这些技术，能帮助你更好地利用...

    鼠标移动变色代码

    本文将深入解析一段“鼠标移动变色代码”，探讨其工作原理、代码结构以及如何在网页中应用此技术。 #### HTML部分 HTML（HyperText Markup Language）是用于构建网页结构的标准标记语言。在给定的代码片段中，可以...

    js实现隔行变色操作鼠标经过效果

    在本案例中，我们探讨的主题是如何使用JavaScript实现一种常见的网页美化技巧——隔行变色，即当用户鼠标悬停在表格行上时，该行会改变颜色，以突出显示。这种效果常见于数据展示或列表中，可以引导用户的注意力，...

    table行随鼠标移动变色示例

    本文将详细介绍如何实现一个“table行随鼠标移动变色”的功能，帮助开发者创建更具视觉辨识度的数据展示表格。 首先，我们来看一下基本的HTML结构。在给出的示例中，一个简单的表格（`&lt;table&gt;`）被创建，包含了表头...

    超简单表格隔行换色+鼠标经过变色(ie6,ie7,ff)

    然而，为了提高可读性和用户体验，设计师经常需要对表格进行美化处理，比如隔行换色和鼠标经过变色。这些效果在不同的浏览器中可能表现不一致，尤其是对于老旧的IE浏览器（如IE6和IE7）和Firefox（FF）。下面我们将...

    用javascript css实现GridView行背景色交替、鼠标划过行变色，点击行变色选中

    在本文中，我们将讨论如何使用它们来实现GridView行背景色的交替、鼠标划过行变色以及点击行变色选中。GridView通常是在ASP.NET中用于显示数据的控件，而JavaScript则可以用来增强用户交互体验。 首先，GridView在...

    鼠标滑过变色

    标题“鼠标滑过变色”通常指的是网页设计中的一种交互效果，当用户将鼠标光标悬停在某个元素上时，该元素的颜色或样式会发生变化。这种效果在导航菜单、按钮或其他可点击元素中非常常见，能提升用户体验，提供视觉...

Magicbox
Global site tag (gtag.js) - Google Analytics