<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>鼠标划过table tr的背景样式变更</title>
</head>
<script type="text/javascript">
function fmove(event){
var tr=event.target.parentNode;
var table = tr.parentNode;
if(table.children[0] != tr) {
var array = tr.children;
for ( var i = 0; i < array.length; i++) {
var td = array[i];
td.style.backgroundColor="#fef7f0";
}
}
}
function fout(event){
var tr=event.target.parentNode;
var array = tr.children;
for ( var i = 0; i < array.length; i++) {
var td = array[i];
td.style.backgroundColor="white";
}
}
</script>
<body>
<table width="972" border="0" cellpadding="0"" cellspacing="0" onmousemove="fmove(event)" onmouseout="fout(event)">
<tr>
<th class="bk" width="85" height="26" scope="col"><div id="u69">
<div id="u69_rtf">
<p>序号</p>
</div>
</div></th>
<th width="140" scope="col">标题1</th>
<th width="127" scope="col">标题2</th>
<th width="130" scope="col">标题3</th>
<th width="100" scope="col">标题4</th>
<th width="132" scope="col">标题5</th>
</tr>
<tr>
<td height="42" align="center" >1</td>
<td align="center" >xxx</td>
<td align="center" >xxxx</td>
<td align="center" >xxxx</td>
<td align="center" > </td>
<td align="center" >2012-1-12</td>
</tr>
<tr>
<td height="42" align="center" >2</td>
<td align="center" >xxx</td>
<td align="center" >xxxx</td>
<td align="center" >xxxx</td>
<td align="center" > </td>
<td align="center" >2012-1-12</td>
</tr>
<tr>
<td height="42" align="center" >2</td>
<td align="center" >xxxx</td>
<td align="center" >xxxx</td>
<td align="center" >xxx</td>
<td align="center" > </td>
<td align="center" >2012-1-12</td>
</tr>
</table>
</body>
</html>
分享到:
相关推荐
在网页设计中,表格(Table)是一种常见的数据展示方式,jQuery 是一个强大的JavaScript库,它极大地简化了DOM操作、事件处理以及动画效果。当我们想要在用户鼠标悬停(mouseover)到表格某一行时,实现整行颜色变化...
"鼠标经过网页背景样式改变,jQuery效果"是一个典型的交互设计案例,它通过JavaScript库jQuery实现,当用户将鼠标悬停在特定元素上时,网页背景或者元素自身会发生视觉上的变化。这种效果能够吸引用户的注意力,使...
在这个特定的场景中,我们讨论的是如何利用JavaScript来实现鼠标经过时改变HTML表格(table)的行列背景颜色,为用户提供更为直观的视觉反馈。下面将详细介绍这个过程。 首先,我们需要一个基本的HTML表格结构。...
在网页设计中,表格(Table)是用于组织数据的重要元素,而当表格嵌套时,如何设置合适的边框样式就显得尤为重要。`table嵌套table的边框样式`是一个常见的需求,尤其在处理复杂的数据展示时。本篇将详细介绍如何...
综上所述,创建“漂亮的table表格样式”涉及多个CSS属性的运用,包括颜色、边框、背景、悬停效果以及过渡动画。通过合理组合这些元素,我们可以制作出既美观又实用的HTML表格,提升网页的整体视觉体验。
网络上收集的css table样式 好看table样式 好看的CSS——Table样式表
根据给定文件的信息,本文将详细介绍几种实用的表格(table)样式,并且深入解析每种样式的具体实现方法。这几种样式包括纯CSS样式、图片背景的CSS样式、颜色变化的CSS样式以及需要JavaScript支持的表格样式。 ### ...
在CSS(层叠样式表)中,背景色是设置元素背景颜色的一种基本属性,它可以用于任何HTML或XML文档,包括HTML表格(table)。表格样式在网页设计中扮演着重要角色,尤其是在展示数据时。本篇将详细介绍CSS背景色的用法...
当鼠标悬停在任何`<tr>`上时,`onMouseOver`事件被触发,使得行的背景颜色变为蓝色。一旦鼠标移开,`onMouseOut`事件被触发,行的背景颜色恢复为白色。这种交互式的视觉变化有助于用户更好地理解页面布局,并增强...
7. **悬停效果**:使用`:hover`伪类可以为鼠标悬停在表格行或单元格上时添加样式,如`tr:hover { background-color: #f0f0f0; }`。 8. **条纹效果**:通过选择器的奇偶性,可以创建类似Excel的条纹效果,如`tr:nth-...
5. **条纹效果**:通过交替设置不同背景色,可以实现类似斑马纹的条纹效果,例如:`.table tr:nth-child(even) { background-color: #f2f2f2; }` 6. **单元格合并**:使用`colspan`和`rowspan`属性可以合并单元格,...
### 改变选择table行的背景色 在网页开发中,为了提高用户体验并增强界面的交互性,我们经常需要对用户的行为做出响应。一个常见的需求是当用户选中表格(`table`)中的某一行时,能够改变该行的背景颜色。这种方式...
一个简单的表格由`<table>`元素开始,内部包含`<tr>`(表格行)元素,`<tr>`中嵌套`<th>`(表头)或`<td>`(表格数据)元素。例如: ```html <table> <tr> 列1 列2 </tr> <tr> 数据1 数据2 </tr> </table> ...
在网页设计中,有时我们需要为用户提供更直观的交互体验,比如当用户将鼠标悬停在表格的某一行(`<tr>`元素)上时,改变这一行的背景颜色以突出显示。这个效果可以通过JavaScript和HTML结合实现。在给定的标题和描述...
在网页设计中,隔行换色、鼠标经过样式和title提示效果是常见的增强用户体验的技巧。这些技术可以提升用户在浏览表格或者列表时的可读性和互动性。下面将详细阐述这些知识点,并给出相应的实现方法。 一、隔行换色 ...
根据给定的信息,本文将详细解释两种HTML表格的样式:单像素边框CSS表格与带背景图的CSS样式表格,并简要介绍一种自动换整行颜色的CSS样式表格(需要用到JavaScript)。 ### 一、单像素边框CSS表格 #### 1.1 CSS...
首先,一个基本的表格由多个部分组成,如`<table>`, `<tr>`, `<th>`, `<td>`等。`<table>`定义了整个表格,`<tr>`表示表格行,`<th>`是表头单元格,而`<td>`则是数据单元格。例如: ```html <table> <tr> 姓名 ...
本文将详细介绍如何利用 JavaScript 来实现鼠标悬停时表格行 (`tr`) 背景颜色变化的效果,并获取表格单元格 (`td`) 的值。 #### 1. 知识点概述 本文主要涉及以下知识点: - 使用 `event` 对象获取当前触发事件的...
本篇文章将深入探讨如何在Bootstrap中集成和使用Table样式。 一、基础样式 Bootstrap的表格默认具有简洁的样式,包括水平对齐的单元格、行高亮以及可选的striped(斑马纹)和bordered(带边框)样式。通过添加`...
本篇文章将详细讲解如何在不预先知道table ID的情况下,使用jQuery来隐藏table中的tr或td元素,以及涉及到的相关知识点。 首先,让我们了解HTML的table结构。一个基本的HTML表格由`<table>`标签开始,内部包含`<tr>...