本文深入解析 Tabulator 从原生 HTML 表格初始化时,将 标签显示为纯 HTML 字符串而非可点击超链接的常见问题。通过 rowFormatter 回调函数提取并重写单元格内容,即可实现链接的正常交互与显示。
先来剖析核心问题。当你使用 Tabulator 初始化一个已有的 HTML 表格(比如 ⚠️ 重要安全提示:使用 table id="table" 这种结构)时,如果某个 td 里面嵌套了 a 标签,例如 let table = new Tabulator("#table", { rowFormatter: function(row) { // 获取当前行所有单元格对象 const cells = row.getCells(); // 假设第一列(索引 0)包含待处理的超链接 const linkCell = cells[0]; const cellEl = linkCell.getElement(); const rawValue = linkCell.getValue(); // 获取原始 innerHTML 字符串 // 安全解析并还原为可渲染的 DOM 超链接 // 注意:请确保 rawValue 来自可信来源 cellEl.innerHTML = rawValue; }});
cellEl.innerHTML = rawValue 会直接执行 HTML 解析。只有当 td 中的 a 标签来自可信源(例如静态页面或经过严格校验的后台数据)时才能这样操作。如果内容可能包含用户输入,建议先用 DOMPurify 等库净化 HTML,或者改用 cellEl.textContent = linkText 配合手动构造 a 元素的方式。
