如何在 Golang 框架中通过 HTML 模板的 range 指令生成交替背景色表格-Golang-PHP中文网

go模板中需用{{range $i, $item := .items}}显式解构获取索引$i，再通过(mod $i 2)配合eq判断奇偶实现隔行变色，空数据时须用{{if .items}}双层判断防panic并渲染占位行。

如何在 golang 框架中通过 html 模板的 range 指令生成交替背景色表格

range 里怎么拿到当前循环索引

Go 模板的 range 默认只暴露元素值，不带索引——这是最常卡住的地方。想实现隔行变色，必须用 $index 或 $i 这类显式索引变量，但前提是把 range 写成带索引解构的形式。

正确写法是：{{range $i, $item := .Items}}，其中 $i 是从 0 开始的整数索引，$item 是当前项。别写成 {{range .Items}}，否则 $i 会报未定义错误。

索引从 0 开始，所以偶数索引（0、2、4…）对应第 1、3、5 行
如果数据来自结构体切片，$item 就是该结构体实例，可直接访问字段如 $item.Name
模板中不能用 ++ 或 % 运算符，得用 mod 函数判断奇偶：{{if eq (mod $i 2) 0}}

用 mod 判断奇偶并应用 class

Go 模板内置 mod 函数，但只接受整数参数，且返回余数（不是布尔值）。常见错误是写成 {{if $i % 2 == 0}}——这会直接报错，因为模板不支持 % 符号运算。

正确方式是组合 eq 和 mod：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

{{range $i, $item := .Items}}
<tr class="{{if eq (mod $i 2) 0}}even{{else}}odd{{end}}">
<td>{{$item.Name}}</td>
  <td>{{$item.Value}}</td>
</tr>
{{end}}

(mod $i 2) 返回 0 或 1，eq 用来比较是否等于 0
避免内联 style，用 class 更利于 CSS 维护；CSS 里写 .even { background: #f9f9f9; } 和 .odd { background: #fff; }
如果表格有表头（<thead>），注意 <code>$i 从 0 开始计数，表头行不参与循环，不影响 tbody 内的奇偶逻辑
空数据时 range 不执行，如何保证表格结构完整

当 .Items 是空切片时，range 块完全不渲染，导致 <tbody> 里没任何 <code><tr>——表格视觉上只剩表头，可能被误判为“加载失败”或样式错乱。 <p>需要显式处理空状态：</p> <pre class="brush:php;toolbar:false;">{{if .Items}} {{range $i, $item := .Items}} <tr class="{{if eq (mod $i 2) 0}}even{{else}}odd{{end}}"> <td>{{$item.Name}}</td> <td>{{$item.Value}}</td> </tr> {{else}} <tr><td colspan="2">暂无数据</td></tr> {{end}} {{else}} <tr><td colspan="2">暂无数据</td></tr> {{end}}</pre> <ul> <li>外层 <code>{{if .Items}} 判断切片是否为空，避免 range 在 nil 切片上 panic
{{else}} 分支在 range 内部，用于空切片时渲染占位行；外层 {{else}} 处理 .Items 为 nil 的情况
colspan 值要和实际列数一致，否则表格错位

CSS 优先级和 table-layout 影响背景色显示

即使模板生成了正确的 class，也可能看不到交替色——大概率是 CSS 被覆盖或表格渲染模式干扰。

检查三点：

浏览器开发者工具里看 <tr> 元素是否真有 <code>even/odd class，有没有被其他 CSS 规则（比如 tr:hover 或全局 background）覆盖
确认没设置 table { border-collapse: collapse; } 后又给 td 单独设背景，这会让 tr 的背景被遮挡；优先给 tr 设背景色
如果用了 table-layout: fixed，确保列宽定义合理，否则某些浏览器下背景色可能渲染不全