HTML表格应语义清晰、预留JS注入点：用唯一id的table，th设data-field标识字段，tbody留空由JS渲染；renderTable函数逐行创建DOM元素插入，兼容IE11+且防XSS。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

HTML表格结构怎么写才方便后续加数据

纯静态 <table> 写法容易卡在「改不动」：加一列要同步改 <code><thead>、<code><tbody>、每行 <code><tr>，排序/搜索根本没法接。真正能用的起点是「语义清晰 + 预留 JS 注入点」。 <p>关键不是画格子，而是让 DOM 结构能被脚本稳定识别：</p> <ul><li><code><table id="data-table"> 必须带唯一 <code>id，别用 class 代替

<thead> 里每列用 <code><th data-field="user_name"> 标明字段名，后续 JS 靠这个映射数据 <li><code><tbody> 留空，不写 <code><tr><td>...</td></tr> —— 数据全由 JS 插入，避免静态内容和动态逻辑打架

如果后端返回的是 JSON 数组，字段名必须和 data-field 值完全一致（大小写敏感）

用原生 JavaScript 渲染后台返回的 JSON 数据

不用框架时，最稳的方式是手写 renderTable(data) 函数，而不是拼接字符串或用 innerHTML 批量写入 —— 容易 XSS，也难调试。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 遍历 data 数组前，先清空 document.querySelector('#data-table tbody').innerHTML = ''
• 对每一项 row，用 document.createElement('tr') 创建行，再循环 Array.from(document.querySelectorAll('#data-table th')) 拿到列定义
• 每个 <td> 的值取自 <code>row[th.dataset.field]，加空值判断：row[th.dataset.field] ?? '-'
• 最后用 tbody.appendChild(tr) 插入，比 innerHTML 更可控，也兼容 IE11+

示例片段：

function renderTable(data) {
  const tbody = document.querySelector('#data-table tbody');
  tbody.innerHTML = '';
  data.forEach(row => {
    const tr = document.createElement('tr');
    document.querySelectorAll('#data-table th').forEach(th => {
      const td = document.createElement('td');
      td.textContent = row[th.dataset.field] ?? '-';
      tr.appendChild(td);
    });
    tbody.appendChild(tr);
  });
}

后端返回数据格式不统一怎么办

常见坑：PHP 返回的 key 是下划线命名（user_id），Java 后端可能是驼峰（userId），而前端 data-field 写的是 user_id —— 渲染出来全是 -。

解决思路不是改后端（往往做不到），而是加一层字段映射：

• 在 HTML 的 <th> 上额外加 <code>data-api-field="userId"，把展示字段（data-field）和 API 字段（data-api-field）分开
• JS 里读值时改用：row[th.dataset.apiField || th.dataset.field]
• 如果后端字段名含空格或特殊字符（如 "order date"），必须用方括号语法，不能用点号
• 遇到嵌套字段（如 user.profile.name），不要在 HTML 里写多级 data-field，统一在 JS 里用 lodash.get(row, th.dataset.field) 或手写安全取值函数

点击表头排序功能怎么低成本加上

排序不是必须用第三方库，几行代码就能跑通，但要注意状态管理。

核心逻辑：

• 给每个 <th> 加 <code>onclick="sortTable(this)"，传入当前列元素
• 用 this.dataset.sortOrder = this.dataset.sortOrder === 'asc' ? 'desc' : 'asc' 切换状态，并更新箭头图标（比如加 ↓/↑）
• 排序前先用 Array.from(tbody.children) 把现有 <tr> 转成数组，避免直接操作 live collection <li>比较函数里用 <code>new Intl.Collator().compare(aText, bText) 处理中文、数字混合排序，比 a > b 可靠得多
• 别忘了：排序后重新渲染时，要保留当前页码（如果有分页）、选中行状态（如果有 checkbox）—— 这些得单独存变量，不能只靠 DOM

真实项目里最容易漏的是「取消排序」：双击同一列应恢复原始顺序，需缓存初始数据副本或记录原始索引。