表格奇偶行设置不同颜色的核心JS代码
作者：互联网
2025-08-08
Javascript教程
这是一个比较实用的功能，设置奇偶行颜色不同后阅读表格数据的体验明显变好，否则数据会显得非常繁杂拥挤（当表格数据行多时体验尤为明显）。只有当你自己真正做这方面的东西接触到时才有强烈的体会，反正我是刚刚经历了，留在这里备参考吧~
核心JS脚本代码如下（table元素的id根据自己的情况调整，代码中的jquery-1.7.min.js可以到jquery的官网上下载）
复制代码代码如下:
< script src="jquery-1.7.min.js" >< /script >
< script >
$(document).ready(function(){
SetTableRowColor();
});
//用CSS控制奇偶行的颜色
function SetTableRowColor()
{
$("#Table tr:odd").css("background-color", "#e6e6fa");
$("#Table tr:even").css("background-color", "#fff0fa");
}
< /scirpt >
相关标签:
相关推荐
专题
+ 收藏
+ 收藏
+ 收藏
+ 收藏
+ 收藏
+ 收藏
最新数据
相关文章
5.响应式系统比对：手写 React 响应式状态库 Mobx
踩坑分享：Vite Plus 最佳实践
VTJ核心引擎开源项目概览
你的 Vue 3 TS 类型声明，VuReact 会处理成什么样的 React？
Element Plus 主题构建方案
Vue 组件间通信
你的 Vue 3 <script setup>，VuReact 会编译成完整的 React 组件
vue3+typescript+vite封装自己的UI组件库并上传至npm
都知道AI大模型能生成文本内容，那你知道大模型是怎样生成文本的吗？
vue3 数据响应式遇到的问题
AI精选
