微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

表格 隔行换色升级版_javascript技巧

php中文网
发布： 2016-05-16 18:42:21
原创
1101人浏览过

昨天弄了个表格隔行换色，但是只是一张表里换
如果一个页面里出现多个表格需要怎么整
捣鼓出新的结果
如下：

飞书多维表格
飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

飞书多维表格 26
查看详情 飞书多维表格
复制代码 代码如下:

function onloadEvent(func){
var one=window.onload
if(typeof window.onload!='function'){
window.onload=func
}
else{
window.onload=function(){
one();
func();
}
}
}
function showtable(tableid){
var overcolor='#FCF9D8';
var color1='#FFFFFF';
var color2='#F8F8F8';
var tablename=document.getElementById(tableid)
var tr=tablename.getElementsByTagName("tr")
for(var i=0 ;itr[i].onmouseover=function(){
this.style.backgroundColor=overcolor;
}
tr[i].onmouseout=function(){
if(this.rowIndex%2==0){
this.style.backgroundColor=color1;
}else{
this.style.backgroundColor=color2;
}
}
if(i%2==0){
tr[i].className="color1";
}else{
tr[i].className="color2";
}
}
}
onloadEvent(function init(){
showtable('table');
showtable('test');
}
);

这样在html里增加表格的时候加上ID就OK了，一个多次调用的表格隔行换色完毕
牛逼的人生不需要解释

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：javascript 打印内容方法小结_javascript技巧 下一篇：兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
JavaScript状态管理库比较分析 Redux适合大型复杂应用，生态完善但样板代码多；MobX提供响应式直观开发体验，适合中小型项目；Zustand和Jotai以极简设计和高性能成为React新兴优选；Vue推荐Pinia，取代Vuex成新标准。
2025-11-15 11:24:00
211
网页中相同源视频的同步播放与性能优化实践 本文旨在解决在网页中同时播放两个相同视频源时遇到的同步问题和资源重复加载挑战。我们将探讨如何通过事件监听和时间戳校准技术实现视频的精确同步，并提供优化策略以避免不必要的资源重复下载，确保用户体验流畅且视觉效果一致。
2025-11-15 11:16:43
606
JavaScript中的正则表达式高级技巧 掌握正则高级技巧可高效处理文本，①用分组捕获提取年月日，②命名捕获提升可读性，③前瞻后顾精准匹配金额，④惰性匹配避免越界，⑤replace回调动态首字母大写。
2025-11-15 10:54:06
739
JavaScript中的新特性Top Level Await使用_js ES2022 Top-levelawait允许在模块顶层直接使用await，无需async函数包裹，简化异步依赖初始化。它适用于ES模块环境，支持动态加载配置、数据库连接等场景，但会阻塞模块执行，需避免长时间操作和循环依赖，Node.js需配置.mjs后缀或"type":"module"。
2025-11-15 10:16:03
788
JS函数参数如何传递_JavaScript函数参数传递方式值传递与引用传递详解 JavaScript中所有参数均为值传递，原始类型传值副本，对象类型传引用副本（地址拷贝），因此可修改对象属性但无法改变原引用指向。
2025-11-15 10:10:03
884
JavaScript中的装饰器如何实现AOP编程？ 装饰器通过函数拦截类或方法行为，实现日志、性能监控等AOP功能。例如@log和@time可自动记录调用信息与耗时，@requireRole实现权限控制，提升代码复用性与可维护性。
2025-11-15 10:01:02
140
JS函数如何定义内部函数_JS内部函数定义与作用域解析 内部函数可访问自身、外部函数及全局变量，形成作用域链，并通过闭包保持对外部变量的引用。如createCounter返回的函数持续访问count变量，实现计数功能，常用于封装私有变量、模块化逻辑等场景。
2025-11-15 09:51:28
197
Nuxt 3 Composition API: 掌握 ref 的响应式更新机制 本文旨在解决Nuxt3中使用CompositionAPI时ref响应性失效的问题。当从OptionsAPI迁移至CompositionAPI时，开发者常遇到ref变量在模板中不更新的困境。文章将详细阐述ref的工作原理，并指出更新ref值时必须通过.value属性访问，以确保数据在视图层面的正确响应。
2025-11-15 09:48:05
589
字符串常用方法汇总_模板字符串高级用法 字符串操作在JavaScript中至关重要，掌握常用方法如charAt、indexOf、includes、slice、replace等可提升开发效率；模板字符串支持插值、多行文本和表达式嵌入，结合标签模板能实现高级功能如内容处理与动态生成，使代码更简洁高效。
2025-11-15 09:03:05
540
如何用js脚本实现页面滚动进度条_js滚动进度显示脚本编写方法 页面滚动进度条通过JavaScript监听滚动事件，计算滚动比例并更新顶部进度条宽度实现。1.创建固定在顶部的div作为进度条；2.用CSS设置其样式和定位；3.JS中通过pageYOffset、scrollHeight和innerHeight计算滚动百分比；4.使用requestAnimationFrame优化性能，避免频繁触发。正确计算可滚动范围确保进度条从0%平滑到100%。
2025-11-15 08:33:05
965
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部