Gin框架模板怎么实现表格隔行显示不同样式

浅强姑娘_2878

浅强姑娘_2878

2026-10-22

963人浏览

原创

gin模板中需用{{range $index, $item := .data}}配合{{if eq (mod $index 2) 0}}判断奇偶行实现隔行变色,推荐手写class而非依赖bootstrap或css :nth-of-type,复杂逻辑应前置到handler预处理。

gin框架模板怎么实现表格隔行显示不同样式

模板里用 index 或 $index 判断奇偶行

Gin 默认使用 Go 的 html/template,不支持 CSS 的 :nth-child 直接绑定到数据循环中(因为服务端渲染时浏览器还没解析 CSS)。必须在模板内手动判断当前是第几行。最常用的是 range 的带索引形式:{{range $index, $item := .Data}},然后用 {{$index | mod 2}} 得到余数。

注意:mod 是 Go template 内置函数,但只在 Go 1.19+ 原生支持;旧版 Gin(如 v1.9.x)若用的是低版本 Go 运行时,mod 可能不存在,此时得提前在 template.FuncMap 中注册一个自定义函数。

  • 推荐写法(兼容性好):{{if eq (mod $index 2) 0}}bg-light{{else}}bg-dark{{end}}
  • 别写成 {{if $index % 2 == 0}} —— template 语法不支持 % 运算符
  • 索引从 0 开始,所以第 1 行是偶数行($index = 0),符合多数人预期

table 标签内用 tr 的 class 控制样式

隔行变色本质是给每行 <tr> 加不同 class,再由 CSS 定义背景色。不要试图在 <code><td> 里重复写样式,更不要用内联 <code>style 手动写死——既难维护,又破坏语义。

示例片段:

{{range $i, $user := .Users}}
<tr class="{{if eq (mod $i 2) 0}}table-row-even{{else}}table-row-odd{{end}}">
<td>{{$user.Name}}</td>
  <td>{{$user.Age}}</td>
</tr>
{{end}}

CSS 部分只需简单定义:

Gin框架 1.9.0
Gin框架 1.9.0

Gin框架 1.9.0版本源码包下载,版本号 1.9.0,适合需要 sonic JSON 支持、路由修复和内容协商改进的 Go Web 开发场景。

下载
.table-row-even { background-color: #f8f9fa; }
.table-row-odd  { background-color: #e9ecef; }
  • 避免用 !important 覆盖 Bootstrap 的 .table-striped —— Gin 模板和 Bootstrap CSS 是两层事,混用易冲突
  • 如果已引入 Bootstrap,直接用 <table class="table table-striped"> 最省事,但该样式只对 tbody 内的奇数行生效,且无法自定义颜色 <li>手写 class 更可控,尤其当需要适配深色模式或品牌色时</li> <h3>用 CSS <code>:nth-of-type 替代服务端判断?小心 DOM 结构干扰

    有人想绕过模板逻辑,纯靠 CSS 实现,比如写 tr:nth-of-type(odd) { background: #eee; }。这确实可行,但有个硬伤:只要 <tr> 前面有其他同级 <code><tr>(比如表头 <code><thead><tr>...</tr></thead> 或空行、合并单元格的 <tr>),序号就会错位。 <ul> <li>确保 <code>tbody 显式包裹数据行:<tbody>{{range ...}}<tr>...</tr>{{end}}</tbody>

  • 避免在循环外手动插入 <tr>,否则 <code>:nth-of-type 会把它们一起计数
  • 如果用了 colspan 或 rowspan,CSS 方案基本失效,必须回到服务端判断
  • 性能与可读性取舍:复杂条件建议提前提取

    当隔行逻辑变复杂(比如“每 3 行一循环”“偶数行高亮,但管理员行永远蓝色”),模板里堆 {{if}}{{else if}}{{end}} 会让 HTML 难以阅读,也容易出错。

    更稳妥的做法是在 handler 里预处理数据:

    • 给每个 item 加字段:RowClass: "row-even" 或 IsAdminRow: true
    • 或传入一个辅助 slice:RowClasses: []string{"even", "odd", "even", ...}
    • 模板里就变成干净的:<tr class="{{$item.RowClass}}"> <p>这种写法牺牲一点内存(多存几个字符串),换来模板清晰、逻辑集中、测试友好。真遇到上万行表格时,服务端预计算反而比每次模板执行一堆判断更快。</p> <p>真正容易被忽略的是:隔行样式在打印 PDF 或导出 Excel 时通常不生效,如果业务要求导出结果也保持交替色,那必须在生成阶段(比如用 <code>excelize)单独处理,不能只依赖前端或模板渲染。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

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

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Golang Beego框架
Golang Beego框架

本专题聚焦 Golang 全栈式 Web 框架 Beego 的学习与实战,内容涵盖 MVC 模式、路由控制、ORM 数据库操作、模块化开发、日志管理与 RESTful API 构建。通过企业管理系统、电商后端与微服务架构等实战案例,帮助学员掌握使用 Beego 高效开发企业级应用的核心能力。

2025.08.27

3500

8

go语言 beego框架
go语言 beego框架

本专题整合了go语言中beego框架相关内容,阅读专题下的文章了解更多详细内容。

2025.09.10

7001

12

Go Web框架Gin接口开发与中间件设计实践
Go Web框架Gin接口开发与中间件设计实践

本专题围绕 Go 在 Web 后端开发中的主流框架 Gin 展开,系统讲解高性能接口开发与中间件机制设计。内容涵盖路由分组、请求绑定、参数校验、统一响应封装、日志与鉴权中间件实现,以及接口限流与异常处理策略。通过实战项目案例,帮助开发者构建结构清晰、性能优良的 Go Web 服务体系,提升接口开发效率与系统可维护性。

2026.03.19

337

21

Playwright 测试失败怎么办
Playwright 测试失败怎么办

Playwright测试失败专题汇集超时、定位器匹配、浏览器提前关闭、依赖与插件配置、文件上传、SSL及Docker启动等故障文章,并介绍通过截图、报告和Trace定位错误。

2026.10.21

20

15

Playwright 页面操作指南
Playwright 页面操作指南

Playwright页面操作专题汇集元素定位、点击与输入、等待响应、多页面切换、Iframe、事件监听及文件处理的已审核文章,便于按操作场景查阅示例与常见问题。

2026.10.21

0

16

Playwright 入门教程
Playwright 入门教程

Playwright入门专题汇集测试框架安装、VS Code配置、录制脚本、编写首个用例、运行调试及查看报告的已审核文章,帮助初学者搭建端到端测试流程。

2026.10.21

0

16

OpenJDK JVM参数怎么调优
OpenJDK JVM参数怎么调优

Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。

2026.10.16

120

10

OpenJDK怎么配置Java开发环境
OpenJDK怎么配置Java开发环境

怎样用OpenJDK搭建开发环境?本专题介绍版本选择、下载安装、环境变量配置和编译运行验证,帮助你理清JDK的作用及基本配置流程,并通过简单程序检查环境是否可用,为后续项目开发做好准备。

2026.10.16

80

10

OpenJDK怎么部署Java应用
OpenJDK怎么部署Java应用

Java项目开发完成后,怎样部署到目标环境并正常运行?本专题介绍OpenJDK应用部署流程,涵盖运行环境准备、版本兼容检查、应用打包、启动参数配置和日志查看,帮助你理清部署前后的操作顺序,减少环境差异造成的运行问题。

2026.10.16

60

10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Gin框架快速入门指南
Gin框架快速入门指南

共0课时 | 0人学习

Gin框架官方中文文档
Gin框架官方中文文档

共0课时 | 0人学习

Go语言Gin框架全套实战教程
Go语言Gin框架全套实战教程

共0课时 | 0人学习