HTML表格中根据业务逻辑状态切换显示不同图标-html教程-PHP中文网

该列图标应由 js 动态控制而非 css 类名开关，需用 render 函数根据 row 字段值创建节点，如 h('i', { class: 'el-icon-phone' })；原生表格则通过 data-status 属性驱动 dom 操作，并用事件委托监听动态图标点击。

html表格中根据业务逻辑状态切换显示不同图标

表格里某列该不该显示图标、显示哪个图标，完全由当前行数据的业务字段决定——不是靠 CSS 类名开关，而是靠 JS 动态生成或控制 DOM 节点。

用 `render` 函数按字段值渲染图标（如 ivew / Element UI）

组件库的 columns 配置中，不能只靠 slot 或 formatter 硬塞 HTML；必须用 render 才能真正控制节点创建逻辑。

render 的第二个参数（通常叫 h 或 createElement）可用来创建图标节点，比如 h('i', { class: 'el-icon-phone' })
先读取当前行数据：例如 row.status === 'active' 才渲染电话图标，否则返回空数组 [] 或 h('span')
不要在 render 里写 v-if 指令——那是模板语法，render 是函数式，得用 JS 条件判断
如果用了 Font Awesome，注意类名要完整：fa fa-phone，且确保 CSS 已加载

原生表格中用 `data-` 属性驱动图标切换

不用框架时，靠 data- 属性把状态“带进 DOM”，再用 JS 查找并替换内容。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

每行 <tr> 加 <code>data-status="callable" 或 data-status="unavailable"
目标单元格内预留占位节点：<span class="icon-placeholder"></span>
遍历所有 .icon-placeholder，读父 <tr> 的 <code>dataset.status，再插入对应图标 HTML 或切类名
避免直接 innerHTML 拼接字符串，优先用 document.createElement + appendChild，防 XSS

图标显示但点击无响应？检查事件委托是否覆盖到动态节点

图标是 JS 动态插入的，但绑定事件时若只查初始 DOM，就会漏掉后来生成的节点。

别用 document.querySelectorAll('.icon-call').forEach(...) —— 新增的图标不会被监听
改用事件委托：table.addEventListener('click', e => { if (e.target.classList.contains('icon-call')) { ... } })
确保 e.target 是图标本身，而不是它的父容器或文字节点；必要时用 e.target.closest('.icon-call')
如果图标是 SVG，注意 <use></use> 标签可能不冒泡，需监听 <svg></svg> 容器

最容易被忽略的是：图标是否真由业务字段驱动，还是靠固定 class 硬编码。一旦表格重渲染（比如分页、搜索），动态图标逻辑若没随数据走，就会断掉——所以状态必须从 row 对象里实时取，不能缓存在闭包或全局变量里。