鼠标经过改变表格背景属性实例

最新推荐文章于 2025-08-13 18:09:13 发布
最新推荐文章于 2025-08-13 18:09:13 发布
阅读量784 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： function xhtml table html border class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/helanye/article/details/4342968
本文介绍了一种使用JavaScript实现HTML表格行鼠标悬停时的高亮显示效果的方法。通过简单的代码示例展示了如何为表格的每一行添加鼠标移入和移出事件，以改变其背景颜色。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<style type="text/css">
.tab table{ border-collapse:collapse; width:500px;}
.tab td{ border:1px solid #999; height:26px;}
</style>
</head>

<body>
<div  class="tab">
<table width="100%" cellspacing="0" cellpadding="0" id="tab">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</div>
<script type="text/javascript">
var t=document.getElementById("tab");
var tr=t.rows;
for(i=0;i<tr.length;i++){
tr[i].onmouseover=Function("c("+i+")");
tr[i].onmouseout=Function("r("+i+")");
}
function c(n){
    if(n+1>tr.length-1){n=n-1}
    tr[n].style.background='#F00';
    tr[n+1].style.background='#F00';
}
function r(n){
    if(n+1>tr.length-1){n=n-1}
    tr[n].style.background='none';
    tr[n+1].style.background='none';
}
</script>
</body>
</body>
</html>

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<style type="text/css">
.tab table{ border-collapse:collapse; width:500px;}
.tab td{ border:1px solid #999; height:26px;}
</style>
</head>

<body>
<div  class="tab">
<table width="100%" cellspacing="0" cellpadding="0" id="tab">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</div>
<script type="text/javascript">
var t=document.getElementById("tab");
var tr=t.rows;
for(i=0;i<tr.length;i++){
tr[i].onmouseover=Function("c("+i+")");
tr[i].onmouseout=Function("r("+i+")");
}
function c(n){
    if((n)%2!=0){n=n-1}
    tr[n].style.background='#F00';
    tr[n+1].style.background='#F00';
}
function r(n){
    if((n)%2!=0){n=n-1}
    tr[n].style.background='none';
    tr[n+1].style.background='none';
}
</script>
</body>
</body>
</html>

helanye
关注
JavaScript 动态网页实例 —— 背景效果
cccloveforever的博客
06-29 2103
页面背景是网页设计中必不可少的重要内容之一，其背景的好坏直接影响网页浏览者的浏览兴趣。网页背景分为背景图和背景色两种，对于普通的背景图和背景色，完全可以通过HTML实现，而要实现复杂的背景效果，则需要借助于JavaScript。本章介绍页面背景的一些实现效果。首先是一个页面背景随机切换的实例:然后，通过3种不同的方法，分别实现用户对页面背景的自动选择:最后，介绍一个闪电的页面背景效果。
javascript修改表格背景色实例代码分享
10-26
在JavaScript中，修改表格（`<table>`）背景色是一种常见的交互效果，特别是在数据展示或者表格操作中。本文将深入探讨如何使用JavaScript实现这一功能，以及相关知识点。 首先，我们来看一个简单的实例代码： ```...
【33】C# WinForm入门到精通 ——表格布局器TableLayoutPanel【属性、方法、事件、实例、源码】
程序员，他们想的是什么?他们想的永远都是技术，他们崇尚的也永远都是技术。
07-30 634
本文介绍了WinForm开发中TableLayoutPanel控件的常用属性及用法。TableLayoutPanel是.NET Framework提供的表格布局控件，适用于需要按行/列分隔界面的场景。主要讲解了Name、AutoScroll、AutoSize等基础属性，重点分析了ColumnStyles中绝对值和百分比两种尺寸设置方式的特点及注意事项。文章通过代码示例和效果截图，直观展示了不同属性设置的实际效果，并针对开发中常见的尺寸计算问题给出了解释。本教程内容由浅入深，适合WinForm初学者系统学习T
CSS常用属性之（列表、表格、鼠标）属性，（如果想知道CSS的列表、表格、鼠标相关的属性知识点，那么只看这一篇就足够了！）
秋刀鱼不做梦的编程日常
04-25 2145
CSS常用属性之（列表、表格、鼠标）属性，（如果想知道CSS的列表、表格、鼠标相关的属性知识点，那么只看这一篇就足够了！）
vue的table表格背景样式和echart引入操作
qq_47213945的博客
01-09 796
vue的table表格背景样式，echart引入操作，el-tansfer的使用，select的使用方法解释
java td背景色_html中如何实现表格移入移出时背景颜色改变？（两种方法）
weixin_39773239的博客
02-26 221
html中如何实现表格移入移出时背景颜色改变？(两种方法)一、总结1、通过css的table标签的hover属性：10 #tab:hover{11 background: green 12 }2、通过js的onmouseover(),onmouseout()事件：16 51 functionchange(c){52 vartab=document.getElementByI...
js开发实例 —— 表格隔行变色&表单全选取消全选
mocoll的博客
08-21 246
七、表格隔行变色 思路： ①用到新的鼠标事件鼠标经过onmouseover鼠标离开onmouseout ②核心思路:鼠标经过tr行，当前的行变背景颜色，鼠标离开去掉当前的背景颜色 ③注意:第一行( thead里面的行)不需要变换颜色,因此我们获取的是tbody里面的行 HTML 代码： JS 代码： 八、表单全选取消全选 思路： ① 全选和取消全选做法:让下面所有复选框的checked属性(选中状态)跟随全选按钮即可。 ② 下面复选框需要全部选中，上面全选才 能选中做法:给下面所有复选框绑定点击事
html css 鼠标移动位置,在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)...
weixin_39957835的博客
06-04 1155
映射鼠标位置或实现拖拽效果，我们可以在 JavaScript 中做到这一点。但实际上，在CSS中有更加简洁的方法，我们可以在不使用JavaScript 的情况下，仍然可以实现相同的功能！只使用CSS就可以实现模仿鼠标"点击和拖动"效果，让我们来看看如何获得用户的鼠标位置，并将其映射到 CSS 自定义属性：--positionX 和 --positionY 中。下面是具体实现步骤。初始化我们的第一个...
html中如何实现表格移入移出时背景颜色改变？（两种方法）
weixin_33827590的博客
05-29 212
html中如何实现表格移入移出时背景颜色改变？（两种方法） 一、总结 1、通过css的table标签的hover属性： 10 #tab:hover{ 11 background: green 12 } 2、通过js的onmouseover(),onmouseout()事件： 16 <table id="tab" b...
易语言模拟Excel表格的鼠标移动效果
07-23
易语言是一种专为中国人设计的编程语言，它以简化的语法和中文命令名称为特点，...这个源码文件“模拟Excel表格的鼠标移动效果”就是一个很好的学习实例，你可以通过阅读和理解代码，进一步提升你的易语言编程技能。
jQuery表格(Table)基本操作实例分析
10-20
### jQuery表格(Table)基本操作实例分析知识点 #### 1. jQuery表格操作简介 jQuery是一个快速、小巧且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作。表格是HTML中常见的元素，...
鼠标移过套线的表格效果特效代码
03-20
标题中的“鼠标移过套线的表格效果特效代码”指的是在网页设计中，当用户将鼠标悬停在表格上方时，表格会出现特定的视觉变化，比如边框颜色、宽度或样式的变化，以此来增强交互体验和提升用户界面的美观度。...
11. HTML 中 DOCTYPE 的作用
weixin_64684095的博客
07-22 576
H5 的声明HTML5 的 DOCTYPE 声明HTML5 中的声明用于告诉浏览器当前文档使用的是 HTML5 的文档类型。它必须是文档中的第一行内容（在任何 HTML 标签之前），以确保浏览器能够正确地解析和渲染页面。DOCTYPE 的作用触发标准模式DOCTYPE声明的主要作用是让浏览器以标准模式（Standards Mode）来解析和渲染页面，而不是以兼容模式（Quirks Mode）。兼容性：在没有DOCTYPE声明的情况下，浏览器可能会进入兼容模式，这会导致页面的布局和样式表现不一致。
基于js和html的点名应用
最新发布
大马猴5的博客
08-13 158
分享一个在课堂或者是公司团建上需要点名的应用程序，开箱即用。1、双击打开后先选择人员名单（可以随时更改的）2、下面的滚动速度可以根据需求调整。
web安全开发，在线%简易版web渗透扫描器%系统，基于Idea,html,css,uniapp,jsp,java,ssm,maven,mysql
Strategic__的博客
08-12 483
这位某安朋友应该还没入门，基本的webtop10（owasp）漏洞如何检测还没掌握，虽然现在有现成工具来进行web漏洞检测，但是原理咱们还是要知道，因为后期咱们实战中遇到大部分都带waf,waf就算了关键waf还带着自主学习的功能，之前就遇好几家带人工智能的waf防火墙哈哈哈。代码原理咱们理解以后聊聊这几个漏洞，xss分三大类，反射，存储dom（其他扩展flask,pdf,uxss），怎么判断xss，最简单方式看下web提交参数会不会在网页显示，如果有咱们直接上payload测试就行。需要定制可以联系哦。
Python Day27 HTML 核心知识笔记及例题分析
ihghhfffv的博客
08-11 1167
HTML基础与网页结构简明指南 本文系统介绍了HTML的核心知识：HTML是超文本标记语言，通过标签描述网页结构。网页基本结构包含文档声明、头部(head)和主体(body)三部分，头部设置编码和标题，主体包含所有可见内容。详细讲解了常见HTML标签的用法： 文本标签(h1-h6标题、p段落、pre预格式文本) 列表标签(ol有序、ul无序、dl定义列表) 媒体与链接标签(img图片、a超链接) 表格标签(table及合并单元格属性) 语义标签(div布局、span行内样式) 特别说明了三种元素显示模式：块
HTML已死，HTML万岁——重新思考DOM的底层设计理念
2301_79342058的博客
08-07 1075
《Web技术亟需革新：DOM、HTML与CSS的历史包袱》文章指出当前Web技术发展陷入瓶颈，客户端体验十年未变。DOM已变得异常臃肿（Chrome中document.body含350+属性），HTML在过去15年几乎停滞，CSS布局存在心智模型错位问题。WebComponents因设计缺陷未能成为主流解决方案，SVG与CSS的融合反而造成混乱。文章认为当前技术堆栈已无法满足现代Web应用需求，建议开放底层能力，重新设计去除历史负担的新架构。作者呼吁关注Servo等实验性项目，认为Web技术亟需突破传统DO
HTML ＜iframe＞ 标签 如何把html写入iframe标签
Rockandrollman的博客
08-13 102
行内框架用于在当前 HTML 文档中嵌入另一个文档。
CSS属性速查与重要实例详解
这通常用于改变链接的视觉效果，比如鼠标指针悬停时的提示。 3. **::first-letter** 和 **::first-line**: 这两个伪元素分别用于选择元素的第一个字母或第一行，并可以单独应用样式，例如强调首字母或设置首行缩进...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值