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

JS控制表格隔行变色的实现代码展示

巴扎黑
发布： 2017-05-21 18:48:08
原创
2421人浏览过

<table width="800" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>不变色</td>
    </tr>
    <tbody id="goaler">
    <tr>
        <td>xxxxxxxx</td>
    </tr>
    <tr>
        <td>xxxxxxxx</td>
    </tr>
    <tr>
        <td>xxxxxxxx</td>
    </tr>
    <tr>
        <td>xxxxxxxx</td>
    </tr>
    </tbody>
    <tr>
        <td>不变色</td>
    </tr>
</table>
<script language="JavaScript">
<!--
var TbRow = document.getElementById("goaler");
if (TbRow != null)
{
    for (var i=0;i<TbRow.rows.length ;i++ )
    {
        if (TbRow.rows[i].rowIndex%2==1)
        {
            TbRow.rows[i].style.backgroundColor="";
        }
        else
        {
            TbRow.rows[i].style.backgroundColor="#F1F1F1";
        }
    }
}
//-->
</script>
登录后复制

以上就是JS控制表格隔行变色的实现代码展示的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：特殊字符、常规符号及其代码对照表 下一篇：自动检查并替换文本框内的字符
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
JS插件开发如何使用ES6语法_ES6在JavaScript插件开发中的应用详解 使用ES6语法开发JavaScript插件可提升代码可读性与模块化程度，通过import/export实现模块分离，class封装插件主体便于继承，解构赋值与默认参数简化配置传递，箭头函数确保this指向正确，static定义静态工具方法，结合构建工具实现兼容性与维护性双赢。
2025-11-11 13:19:02
476
Tiptap 编辑器内容为空判断：如何准确识别仅含空白字符和换行符的“空”状态 在Tiptap编辑器中，标准的内容长度检查或内置的isEmpty方法可能无法准确判断仅包含空白字符或换行符的“空”状态。本文将深入探讨这一常见问题，并提供一种利用JavaScripttrim()方法的可靠解决方案，确保编辑器在仅有不可见字符时也能正确返回空状态，从而提升内容验证的准确性。
2025-11-11 13:09:02
471
怎样通过js脚本实现表格排序功能_js表格排序脚本编写与使用 通过JavaScript实现HTML表格排序功能，首先解析表结构并提取数据行，基于指定列文本或数值比较进行升序或降序排列，利用sort()方法排序后重新插入tbody完成更新；通过onclick绑定表头事件触发排序，并用toggleSort函数切换升降序状态，结合ID选择器与columnIndex参数实现交互式排序，适用于中小型静态数据展示场景。
2025-11-11 13:05:03
127
JavaScript全局常量管理：避免重复定义与作用域陷阱 本文深入探讨了在JavaScript中定义全局常量时遇到的作用域限制和重复定义问题。针对const在块级作用域内的行为，文章提出了三种解决方案：推荐使用ES6模块进行常量导出与导入，以实现单次评估和良好封装；其次，强调通过避免脚本多次加载来从根本上解决问题；最后，作为一种兼容性方案，讨论了利用var的特性来处理全局常量，并分析其优劣。
2025-11-11 12:52:11
919
JavaScriptPromise怎么使用_Promise异步编程原理与JS全栈实战应用 Promise通过链式调用解决回调地狱，提供pending、fulfilled、rejected三种状态，利用微任务队列确保异步回调优先执行，广泛应用于前端请求、Node.js文件操作及并发控制，是现代JavaScript异步编程的基础。
2025-11-11 12:51:02
640
Tiptap 编辑器内容为空判断：如何准确识别仅含空白字符的“空”状态 本文将详细介绍如何在Tiptap编辑器中准确判断内容是否为空，特别针对仅包含空白字符（如空格、换行符）的情况。通过结合JavaScript的trim()方法处理编辑器文本内容，我们可以克服Tiptap内置isEmpty或简单textContent.length检查的局限性，确保仅含不可见字符的编辑器被正确识别为“空”，从而实现更精确的表单验证和UI逻辑。
2025-11-11 12:39:17
610
MongoDB数据库怎么连接_MongoDB数据库连接与Node.js集成方法详解 使用MongoDB驱动可直接连接数据库，适合轻量级项目；2.Mongoose提供模式和验证，适用于中大型应用；3.推荐使用dotenv管理连接字符串以提升安全性；4.配置超时和重试机制增强稳定性；5.根据项目复杂度选择合适方案并做好错误处理。
2025-11-11 12:28:02
365
JavaScript与HTML交互：构建实时职位搜索功能 本文详细介绍了如何将HTML输入框与JavaScript数据过滤功能相结合，实现一个实时的职位搜索应用。通过利用document.getElementById获取用户在输入框中键入的值，并将其作为参数传递给JavaScript函数，我们能够对预定义的工作列表进行动态、大小写不敏感的筛选，最终在控制台输出匹配结果及数量。
2025-11-11 12:14:37
419
JavaScript归并排序实现中的常见陷阱与优化 本文旨在深入探讨JavaScript归并排序（MergeSort）实现中常见的编程陷阱与优化策略。我们将详细分析索引处理、边界条件、整数除法以及数组拷贝等关键环节，通过具体代码示例揭示问题根源，并提供符合最佳实践的解决方案，帮助开发者构建高效、健壮的归并排序算法。
2025-11-11 12:05:01
946
js构造继承有什么优点 构造函数继承通过call或apply在子类中调用父类构造函数，实现属性独立拷贝、支持向父类传参、避免原型链共享副作用，确保实例间数据隔离。
2025-11-11 11:51:30
961
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

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

  • PHP学习

  • 技术支持

  • 返回顶部