表格的背景颜色都是无色的,当读过表格中的数据后,背景颜色变为黑色,当在次浏览具体的某一条数据的时候,该条的背景颜色是绿色. 很有意思~
要完成此效果需要两个步骤
第一步：把如下代码加入到<head>区域中
<script language="JavaScript1.2">
function changeto(highlightcolor){
source=event.srcElement
if (source.tagName=="TR"||source.tagName=="TABLE")
return
while(source.tagName!="TD")
source=source.parentElement
if (source.style.backgroundColor!=highlightcolor&&source.id!="ignore")
source.style.backgroundColor=highlightcolor
}
function changeback(originalcolor){
if (event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="ignore")
return
if (event.toElement!=source)
source.style.backgroundColor=originalcolor
}
</script>
第二步：把如下代码加入到<body>区域中
<table width="30%" border="1" align="center" onMouseover="changeto('33ff33')" onMouseout="changeback('black')"
>
<tr>
<td>
<div align="center">JavaScript Fairyland</div>
</td>
</tr>
<tr>
<td>
<div align="center">JavaScript Fairyland</div>
</td>
</tr>
<tr>
<td>
<div align="center">JavaScript Fairyland</div>
</td>
</tr>
<tr>
<td>
<div align="center">JavaScript Fairyland</div>
</td>
</tr>
<tr>
<td>
<div align="center">JavaScript Fairyland</div>
</td>
</tr>
</table>
分享到：
相关推荐
"响应鼠标变换表格背景或者颜色"是一个典型的JS特效应用，它涉及到了HTML表格、CSS样式以及JavaScript事件处理。下面将详细阐述这个主题的知识点。 首先，HTML表格是网页数据展示的主要工具，由`<table>`、`<tr>`...
在本主题“css 单击表格变换颜色”中，我们将深入探讨如何使用CSS来实现用户在点击表格单元格时改变其背景颜色的效果，为用户提供更好的交互体验。 首先，我们需要了解HTML表格的基本结构。一个简单的HTML表格由`...
文档中还提到了一些相关的JavaScript代码示例，例如使用JavaScript实现表格行的背景颜色交替、li列表的数据隔行变色、响应鼠标事件改变表格或元素颜色、背景云的动态效果、鼠标移动时背景云的变化，以及使用Jquery...
在实现表格颜色变换时，虽然我们没有直接使用图层，但理解CSS的层叠顺序有助于在复杂布局中控制元素的显示。 总的来说，"单击表格变换颜色"这一功能涉及到了HTML基础、CSS样式设计以及JavaScript事件处理，是前端...
响应鼠标变换表格背景或者颜色的代码 在前端开发中，响应鼠标变换表格背景或者颜色的代码是一个常见的交互效果。该效果可以通过使用JavaScript和HTML实现。下面将对该代码进行详细的解释和分析。 首先，让我们来看...
### ASP 下制作行背景颜色交替变换的表格 在 Web 开发中，为了增强用户体验和美观度，经常需要对表格中的行或列应用不同的样式。本文将详细介绍如何在 ASP（Active Server Pages）环境中实现表格行背景颜色的交替...
在CSS中，我们可以为表格的每一行设置不同的类，比如`.even`和`.odd`，然后分别定义它们的背景色。例如： ```css .table tr.even { background-color: #F5F5F5; } .table tr.odd { background-color: #FFFFFF; }...
本文将深入探讨如何利用jQuery实现数据排序以及在表格中实现颜色交替显示的效果，这两种技术在Web开发中都有着广泛的应用。 首先，让我们来理解如何使用jQuery进行数据排序。在Web应用中，我们经常需要对数据列表...
例如，可以设置默认的表格背景颜色为白色，鼠标悬停时变为灰色： ```css #interactiveTable td { background-color: white; } #interactiveTable td:hover { background-color: lightgray; } ``` 这样的CSS规则...
5. **`bgcolor`**: 设置表格背景颜色，值为`#000000`即黑色。 6. **`align`**: 设置表格行内单元格的水平对齐方式，值为`center`表示居中对齐。 7. **`bgcolor` (单元格背景)**: 设置表格行的背景颜色，值为`#FFFFFF...
1. **颜色变换原理**： 在计算机编程中，颜色通常是通过RGB（红绿蓝）三原色模型来表示的，每种颜色的值范围为0到255。通过改变这些值，我们可以创建各种颜色效果。颜色变换就是改变这些值的过程，可以是渐变、闪烁...
通过JavaScript，我们可以改变TD的样式，如颜色、图像等，以实现背景的动态变换，增强用户的交互体验。这种技术尤其适用于创建数据表格、卡片视图或者构建复杂的用户界面。 要实现TD背景的变换，首先要了解...
2. **表格样式与格式**：表格的外观可以通过调整字体、颜色、边框、背景色等进行优化，使其更具视觉吸引力。在Web开发中，HTML `<table>` 标签用于创建表格，CSS可以用来定制样式，如表格的边框样式、单元格间距等。...
<title>jQuery表格多选与颜色变换 table tr:nth-child(even) { background-color: #f2f2f2; } .selected { background-color: #d9d9d9; /* 选中状态颜色 */ } ...
3. **隔行变换填充颜色提高表格的可视性**： 当表格包含大量数据时，为了防止观众在阅读过程中感到视觉疲劳，可以采用隔行填充不同颜色的方式。这被称为“斑马线”效果，可以降低视觉混淆，使数据更易于扫描。例如...
GDI+提供了诸如绘图路径、图形状态、颜色、字体、刷子和笔等基本元素，通过这些元素，我们可以构建出复杂的图形结构，包括表格。在C#中，`System.Drawing`命名空间包含了所有与GDI+相关的类和方法，如`Graphics`类...
`将背景颜色设置为蓝色。 在创建立体表格时，我们主要关注以下CSS属性： 1. **边框（Borders）**：通过设置`border-width`, `border-style`, 和 `border-color`，我们可以给表格单元格添加不同宽度、样式和颜色的...