HTML表格合并单元格显示两种数据的方法主要依赖于rowspan和colspan属性。以下是一个简单的示例，展示如何在HTML表格中合并单元格以显示两种格式的数据（例如文本和数字）：示例代码<tableborder="1"><tr><throwspan="2">姓名</th><th>年龄</th><th>成绩<

本文深入讲解了如何在HTML表格中通过语义化DOM操作，将两组独立的JavaScript动态数据（如圈数与DFS得分）精准、安全地合并渲染到同一单元格内——既用独立容器（如span）保持结构清晰，又借助模板字符串自动添加括号等自定义格式，兼顾可读性、样式可控性与XSS防护；同时提供性能优化建议和响应式对齐方案，助你构建健壮、易维护、可测试的前端表格数据展示逻辑。

本文介绍如何通过 DOM 操作将两组 JavaScript 动态数据（如 r_laps 和 r_dfs）渲染到同一 单元格内的不同容器中，并支持添加括号等自定义格式，确保语义清晰、结构可控、样式可维护。

在实际前端开发中，常需将多个逻辑上关联但来源独立的数据（例如“圈数”与“DFS 得分”）并排展示于表格同一单元格内。直接拼接字符串虽可行，但缺乏结构化控制和后续样式/交互扩展能力。推荐做法是：保留语义化 DOM 结构，通过 JavaScript 分别注入内容，并利用内联格式增强可读性。

以下为标准实现方案：

<td>
  <div class="rcelldata">
    <div id="r_laps"></div>
    <div id="r_dfs"></div>
  </div>
</td>

对应 JavaScript（ES6+）：

// 假设已从接口或变量获取数据
const r_laps_recieved = "42";
const r_dfs_recieved = "89.5";

// 获取 DOM 元素（建议在 DOM 加载完成后执行）
const rLapsEl = document.getElementById("r_laps");
const rDfsEl = document.getElementById("r_dfs");

// 分别写入内容，保持结构分离
rLapsEl.textContent = r_laps_recieved;
rDfsEl.textContent = `(${r_dfs_recieved})`; // ✅ 自动添加括号

✅ 优势说明：

• 每个
  独立承载数据，便于后续 CSS 控制间距（如 display: inline-block 或 margin-left: 4px）；
• 使用 .textContent 而非 .innerHTML 可避免 XSS 风险（除非内容含可信 HTML）；
• 模板字符串（`(${...})`）简洁安全地实现格式包裹。

⚠️ 注意事项：

• 确保脚本在目标元素渲染后执行（推荐使用 DOMContentLoaded 或将