<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JQuery鼠标经过表格行变色</title>
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<!-- 上面的js是JQuery -->
<script type="text/javascript">
$(function(){ //文档加载
$("#tb").width(520); //设置表格宽度为520像素
$("#tb").height(250); //设置表格的高度为250像素
$("#tb").css("background-color","#000000"); //设置表格背景颜色为黑色
$("tr").attr("bgColor","#FFFFFF"); //添加表格行的背景属性并设置为白色，注意这里的属性不是bgcolor而是bgColor
$("td").append(" "); //在所有单元格上添加空格
$("tr").hover(
function(){
$(this).addClass("hover"); //鼠标经过添加hover样式
},
function(){
$(this).removeClass("hover"); //鼠标离开移除hover样式
}
);
});
</script>
<style type="text/css">
.hover{background-color:#FFF000;} /*这里是鼠标经过时的颜色*/
</style>
</head>
<body>
<table id="tb" border="0" cellpadding="0" cellspacing="1">
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
</body>
</html>
分享到：
相关推荐
总之，"jQuery 鼠标移动到表格变色特效"是一个利用jQuery处理鼠标事件并改变元素样式的实例，通过学习这个例子，开发者可以掌握jQuery的基本用法，了解如何结合CSS实现交互效果，这对于创建动态、响应式的网页界面至...
标题中的“jQuery鼠标移动表格变色及修改单元格值”是指使用jQuery库来实现一个功能，当鼠标在HTML表格上移动时，所经过的单元格会改变颜色，并且用户能够编辑表格中的单元格值。这个功能结合了jQuery的选择器、事件...
当我们想要在用户鼠标悬停（mouseover）到表格某一行时，实现整行颜色变化的效果，jQuery提供了解决方案。这不仅能提升用户体验，也能帮助用户更直观地识别出当前关注的数据行。 首先，我们需要在HTML中创建一个...
本主题涉及的是使用jQuery实现的一种常见的用户界面优化技巧——"表格隔行变色"以及"鼠标滑过时竖直表格内容变色效果"。这种效果可以提升表格的可读性，使得数据更加清晰易辨。 首先，我们来讨论“表格隔行变色”。...
通过jquery给经过的表格设置css背景变色效果
本教程将详细讲解如何使用jQuery实现一个仿Excel表格的选中变色效果，以增强用户界面的交互性。 首先，我们需要理解jQuery的基本用法。jQuery的核心在于它的选择器，它允许我们高效地选取DOM元素。例如，`$("#...
本项目“精选_毕业设计_隔行换色鼠标指向表格行变色（含页面内容查找功能）、jQuery UI插件（gridster）_完整源码”集成了这些技术，为用户提供了一套实用的功能。 首先，我们来探讨“隔行换色鼠标指向表格行变色”...
在本教程中，我们将深入探讨如何利用jQuery实现一个功能：当鼠标滑过表格时，使得行背景色发生变化，即所谓的“鼠标悬停高亮”效果。这个效果可以提升用户体验，帮助用户更清楚地识别和跟踪选中的表格行。 首先，...
4. **jQuery 鼠标事件处理**：在本例中，我们需要在鼠标进入（mouseover）和离开（mouseout）表格行时改变背景颜色。这可以通过绑定事件处理器来实现，如下： ```javascript $("tr").mouseover(function() { $...
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
5. **DOM遍历**：在处理表格时，可能需要遍历行(`tr`)和列(`td`)，jQuery提供了`.each()`函数进行迭代。例如，遍历所有单元格以实现全选或取消全选的功能。 6. **范围选择**：仿Excel的另一个特性是连续选择多个...
该代码可以实现表格中鼠标在不同行间移动来实现输鼠标移入移出 有颜色提醒的效果
在本文中，我们将深入探讨如何使用jQuery实现一个仿Excel表格的选中单元格变色特效。这个功能允许用户在网页上的表格中通过鼠标操作选择单个或多个单元格，同时改变选中单元格的背景颜色，以模拟Excel的交互体验。 ...
总结来说，本文提供的实例代码不仅清晰地演示了如何用jQuery实现表格的隔行变色和点击行变色，而且强调了jQuery在网页交互设计中的实用性和有效性。通过编写简单的jQuery脚本，可以极大地增强网页的功能和用户的交互...
本资源"jQuery实现table表格鼠标经过隔行换颜色特效代码.zip"提供了一种方法，利用jQuery来实现在网页中table表格鼠标悬停时的视觉效果，即隔行变色。这一功能对于提升用户体验，使得用户在浏览数据密集型表格时能更...
"jQuery 实现 table 鼠标经过变色代码"就是一种常见的交互设计技巧，它可以使用户更容易注意到被鼠标悬停的表格行，从而引导用户更直观地操作和理解数据。下面我们将深入探讨如何使用 jQuery 实现这一效果，并解释...
1. **表格悬停变色/恢复**：这指的是当用户将鼠标悬停在表格的某一行上时，那一行的背景色会变成指定的颜色，当鼠标移出时，该行的颜色会恢复原样。实现这一点的方法是在jQuery的hover事件中添加和移除CSS类。文档中...
本项目“jquery实现的超帅动态表格交叉变色高亮显示效果.zip”显然关注的是如何利用jQuery来增强网页中的表格展示，特别是涉及到动态数据更新时的视觉效果。 首先，我们要理解jQuery如何处理表格（`<table>`）元素...
在“jquery 框选变色”这个主题中，我们将探讨如何利用jQuery实现对HTML表格（table）中的选定单元格（td）进行颜色变化的功能。 首先，我们需要理解HTML表格的基本结构。一个表格由`<table>`元素定义，内部包含行`...