<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>鼠标经过给tr换颜色</title>
</head>
<body>
<table align="center" width="100%" border="1" cellspacing="1" cellpadding="1" >
<tr style="cursor:hand " onmousemove="changeTrColor(this)">
<td align="center">1</td>
<td height="20"> 123</td>
<td height="20"> abvx</td>
<td height="20"> 465465</td>
<td height="20">546654654</td>
</tr>
<tr style="cursor:hand " onmousemove="changeTrColor(this)">
<td align="center">1</td>
<td height="20"> 123</td>
<td height="20"> abvx</td>
<td height="20"> 465465</td>
<td height="20">546654654</td>
</tr>
<tr style="cursor:hand " onmousemove="changeTrColor(this)">
<td align="center">1</td>
<td height="20"> 123</td>
<td height="20"> abvx</td>
<td height="20"> 465465</td>
<td height="20">546654654</td>
</tr>
</table>
<script type="text/javascript">
function changeTrColor(obj){
var _table=obj.parentNode;
for (var i=0;i<_table.rows.length;i++){
_table.rows[i].style.backgroundColor="";
}
obj.style.backgroundColor="blue";
}
</script>
</form>
</body>
</html>
分享到：
相关推荐
在网页设计中，有时我们需要为用户提供更直观的交互体验，比如当用户将鼠标悬停在表格的某一行（`<tr>`元素）上时，改变这一行的背景颜色以突出显示。这个效果可以通过JavaScript和HTML结合实现。在给定的标题和描述...
当我们想要在用户鼠标悬停（mouseover）到表格某一行时，实现整行颜色变化的效果，jQuery提供了解决方案。这不仅能提升用户体验，也能帮助用户更直观地识别出当前关注的数据行。 首先，我们需要在HTML中创建一个...
在网页开发中，我们经常需要实现一些交互效果来提升用户体验，比如当用户鼠标移动到表格的行（tr）上时，行的背景色发生变化。在JSP（JavaServer Pages）中，这种效果可以通过CSS（Cascading Style Sheets）和...
"jQuery实现table表格鼠标经过隔行换颜色特效代码"是一个实用的例子，展示了如何利用jQuery为HTML表格添加交互性，使得用户在鼠标悬停在表格行上时，能动态改变行的背景色，提高用户体验。 首先，我们需要了解HTML...
在网页设计中，隔行换色、鼠标经过样式和title提示效果是常见的增强用户体验的技巧。这些技术可以提升用户在浏览表格或者列表时的可读性和互动性。下面将详细阐述这些知识点，并给出相应的实现方法。 一、隔行换色 ...
在这个特定的场景中，我们讨论的是如何利用JavaScript来实现鼠标经过时改变HTML表格（table）的行列背景颜色，为用户提供更为直观的视觉反馈。下面将详细介绍这个过程。 首先，我们需要一个基本的HTML表格结构。...
"表格隔行换色 鼠标移过变色"是两种常见的表格样式优化手段，它们可以使得表格内容更易于阅读，同时提升用户体验。在JavaScript（JS）的帮助下，我们可以轻松实现这些效果。 1. **隔行换色**： 隔行换色通常使用...
然而，为了提高可读性和用户体验，设计师经常需要对表格进行美化处理，比如隔行换色和鼠标经过变色。这些效果在不同的浏览器中可能表现不一致，尤其是对于老旧的IE浏览器（如IE6和IE7）和Firefox（FF）。下面我们将...
要实现鼠标经过时改变背景色或颜色的效果，我们首先要有一个基本的表格结构。 ```html <tr> 数据1 数据2 </tr> <tr> 数据3 数据4 </tr> ``` 接着，CSS样式用于定义表格及其元素的外观。我们可以设定默认...
在本案例中，我们探讨的主题是如何使用JavaScript实现一种常见的网页美化技巧——隔行变色，即当用户鼠标悬停在表格行上时，该行会改变颜色，以突出显示。这种效果常见于数据展示或列表中，可以引导用户的注意力，...
我们可以为`<tr>`元素定义一个类，然后在`:hover`伪类下设置背景颜色。例如，我们可以创建一个名为`.hover-row`的类，并将其应用于`<tr>`： ```css .tr-hover:hover { background-color: lightblue; /* 选择你喜欢...
本文将详细介绍如何利用 JavaScript 来实现鼠标悬停时表格行 (`tr`) 背景颜色变化的效果，并获取表格单元格 (`td`) 的值。 #### 1. 知识点概述 本文主要涉及以下知识点： - 使用 `event` 对象获取当前触发事件的...
在实际应用中，我们经常需要根据用户的选择状态来改变表格的视觉效果，比如选中某行后改变其颜色，以突出显示。下面将详细介绍如何在layui的表格中实现这一功能，并涉及到相关的JavaScript和CSS知识。 首先，layui...
通过`onmouseover`和`onmouseout`事件处理器，当鼠标悬停在`<td>`元素上时，改变其背景颜色、边框颜色和文字颜色；当鼠标移出时，恢复原状。这里使用了IE特有的`filters`属性，以实现颜色的渐变过渡。 最后，在`...
在网页设计中，"鼠标经过表格内容自动切换"是一种交互效果，它允许用户在鼠标悬停在表格单元格上时，自动显示或切换相关的详细信息。这种效果通常用于数据密集型的展示，如报表、统计数据或者产品目录，使得用户无需...
描述中提到的“鼠标经过时让li背景变色”，是希望通过hover方法来响应用户的鼠标动作，当鼠标进入`<li>`元素的边界内，背景变为指定颜色，而当鼠标离开时，恢复原来的背景颜色。这样可以让用户更加清晰地知道他们...
- 鼠标悬停（`:hover`）状态下，我们可以为`<tr>`定义一个类，例如`.hover`, 并设置背景色等样式，使得鼠标经过时行变高亮。例如： ```css tr.hover { background-color: #f0f0f0; /* 或者其他您选择的颜色 */ ...
在某些情况下，为了提高用户体验，我们可能希望当鼠标悬停在GridView的某一行时，该行的颜色有所变化，以提示用户当前所选中的行。这就是"asp.net 鼠标停留在GridView某一行时颜色改变"这个主题所要解决的问题。 ...