`
ouyangfei0426
  • 浏览: 127505 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

表格行随鼠标移进移出切换样式

 
阅读更多
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<script language="JavaScript">
			function over(id){
				var e=document.getElementById(id);
				e.style.backgroundColor='#0478fb';
				e.style.color='#ffffff';
			}
			
			function out(id){
				var e=document.getElementById(id);
				e.style.backgroundColor='#FFFFFF';
				e.style.color='#000000';
			}
		</script>
	</head>
	<body>
		<table width="200" border="0">
			<tr id="123" onMouseOver="over(this.id);" onmouseout="out(this.id);">
				<td>
					jnihao
				</td>
				<td>
					jnihao
				</td>
				<td>
					jnihao
				</td>
			</tr>
			<tr id="456" onMouseOver="over(this.id);" onmouseout="out(this.id);">
				<td>
					jnihao
				</td>
				<td>
					jnihao
				</td>
				<td>
					jnihao
				</td>
			</tr>
			<tr id="789" onMouseOver="over(this.id);" onmouseout="out(this.id);">
				<td>
					jnihao
				</td>
				<td>
					jnihao
				</td>
				<td>
					jnihao
				</td>
			</tr>
		</table>
	</body>
</html>
 
分享到:
评论

相关推荐

    javascript表格隔行变色加鼠标移入移出及点击效果的方法.docx

    鼠标移入移出效果是指当鼠标光标移动到某一行时,该行的背景颜色会发生变化;而当鼠标离开后,背景颜色又恢复原状。这可以通过监听`onmouseover`和`onmouseout`事件来实现。 **具体实现步骤如下:** 1. **添加事件...

    vue实现鼠标移入移出事件代码实例

    当鼠标移出时,`leave`方法设置`seen`为`false`,`current`为`null`。 5. **条件渲染**: `v-show`指令根据表达式的结果来切换元素的可见性。在这里,`&lt;div class="index-show"&gt;`只有当`seen`为`true`且`index`...

    javascript表格隔行变色加鼠标移入移出及点击效果的方法

    当鼠标移出时,恢复原来的隔行变色效果。这有助于用户清楚地知道他们正在查看哪一行内容。 最后,实现点击变色的功能,主要是为了用户能够更直观地选择或标记他们感兴趣的行。我们可以通过添加`onclick`事件监听器...

    jquery表格隔行变色鼠标滑过竖直表格内容变色效果

    当鼠标进入表格单元格时,我们改变单元格的样式,鼠标移出时再恢复原样。以下是一个简单的实现示例: ```javascript $(document).ready(function() { $('td').hover(function() { $(this).css('background-color'...

    js实现自动轮播图选项卡效果(光标移入暂停).pdf

    4. 监听鼠标移出事件,恢复自动轮播图效果。 5. 使用 classList 属性来控制图片的显示和隐藏。 五、光标移入暂停实现思路 实现光标移入暂停效果的思路可以分为以下几个步骤: 1. 监听鼠标移入事件,暂停自动轮播...

    javascript改变表格行的颜色

    // 添加鼠标移出事件 rows[i].addEventListener('mouseout', function() { this.style.backgroundColor = ''; }); } ``` 这种方法的好处是可以将样式和行为分离,使得HTML结构更清晰,也便于后期修改和维护。 ...

    js控制鼠标事件移动及移出效果显示

    本文将探讨如何利用JS控制鼠标移动(mousemove)和鼠标移出(mouseout)事件来实现页面元素的背景颜色变化效果。 首先,要实现鼠标事件的自定义效果,需要了解HTML中事件属性和JS的相关概念。HTML中的事件属性可以...

    jquery常用效果笔记

    这里的CSS样式定义了`.alt`和`.over`两个类,分别用于条纹效果和鼠标移入移出的效果。 #### 2. 显示/隐藏内容 此功能允许用户通过点击按钮来显示或隐藏特定的HTML内容。实现方式是利用jQuery的`toggle()`函数来...

    《程序天下:JavaScript实例自学手册》光盘源码

    4.17 checkbox鼠标移入移出的特效 第5章 层和框架的特效 5.1 div层提示效果 5.2 层自动滚动到最底端 5.3 div的自动滚动 5.4 div的折迭效果 5.5 圆角div 5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe...

    程序天下:JavaScript实例自学手册

    4.17 checkbox鼠标移入移出的特效 第5章 层和框架的特效 5.1 div层提示效果 5.2 层自动滚动到最底端 5.3 div的自动滚动 5.4 div的折迭效果 5.5 圆角div 5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe...

    javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox

    1. **表格悬停变色/恢复**:这指的是当用户将鼠标悬停在表格的某一行上时,那一行的背景色会变成指定的颜色,当鼠标移出时,该行的颜色会恢复原样。实现这一点的方法是在jQuery的hover事件中添加和移除CSS类。文档中...

    jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例

    其次,关于高亮显示当前选择的行,这通常涉及到用户的交互事件,如鼠标悬浮(mouseover)、鼠标移出(mouseout)以及鼠标点击(click)事件。在这些事件触发时,我们需要对选择行应用特定的样式,比如更改背景色以...

    CSS鼠标响应事件经过、移动、点击示例介绍

    鼠标移出时,这些样式会恢复。 控制表格隔行变色是另一种常见需求,可以使用CSS的`:nth-child()`选择器来实现。这里有一个简单的应用,让偶数行背景色为淡灰色,奇数行为白色: ```css tr:nth-child(even) { ...

    jQuery实现鼠标滑过预览图片大图效果的方法

    除了动态添加图片外,还要在鼠标移出图片时隐藏预览的大图。这是通过监听mouseout事件实现的。一旦触发mouseout事件,就执行隐藏图片的操作,即调用hide()方法。 另外,为了实现更丰富的交互效果,如上传图片后预览...

    js实现图片从左往右渐变切换效果的方法

    `onmouseout` 事件处理程序被用于控制鼠标悬停和移出时的行为,当鼠标悬停在某个图片上时,会调用 `clearAuto` 函数停止自动播放,当鼠标离开时,则调用 `setAuto` 函数来重新开始自动播放图片切换效果。 实现图片...

    JS+CSS实现可以凹陷显示选中单元格的方法

    这些函数通过事件监听器绑定到document对象上,分别对应鼠标的over(鼠标悬停)、out(鼠标移出)和click(鼠标点击)事件。当鼠标悬停在表格单元格上时,如果该单元格处于normal状态,则将其类名更改为hover,产生...

    javascript 的事件

    - **描述**:当用户在拖曳操作过程中将鼠标移出合法拖曳目标时在目标对象上触发。 - **用途**:可用于在对象离开目标区域时执行动作。 ##### 32. **ondragover** - **描述**:当用户拖曳对象划过合法拖曳目标时...

    Excel使用技巧大全(超全).

    - 使用格式设置来改变单元格的颜色、字体样式等属性。 #### 数据输入和编辑技巧 这部分内容涵盖了从简单的数据输入到复杂的单元格格式化操作。接下来,我们将深入探讨其中的部分技巧: **45. 在一个单元格内输入...

    JS实现留言板功能

    为了实现留言项的删除功能,每个留言项在创建时会绑定鼠标悬停(mouseover)和鼠标移出(mouseout)事件。当鼠标悬停在一个留言项上时,会检查是否存在a标签(即“删除”按钮)。如果不存在,则创建一个a标签,并为...

Global site tag (gtag.js) - Google Analytics