如何用jQuery格式化HTML表格以实现指定展示效果？

我来帮你排查下问题所在～你的代码有两个关键错误导致表格格式不符合预期：

问题分析 #

• 表头HTML结构错误：你把每个<th>都放在了单独的<tr>里，还出现了标签闭合错误（比如<tr><th>Hours</tr></th>这种写法完全不符合HTML规范），正确的表头应该是一个<tr>标签包裹所有的表头单元格。
• 数据行渲染逻辑错误：你循环时是往已有的表头行里追加<td>元素，这会导致所有数据都挤在表头那一行，而不是每条数据生成独立的行。

修改后的代码 #

$tableSearch = $('#table-search');
// 清空表格并添加正确结构的表头
$tableSearch.empty().append('<tr><th>Name</th><th>Hours</th><th>MB</th></tr>');

// 遍历结果，为每条数据生成独立的行
result.forEach(function(row) {
  // 创建新的表格行，填充数据后追加到表格
  const newRow = `<tr>
    <td>${row.Date}</td>
    <td>${row.Hours}</td>
    <td>${row.MB}</td>
  </tr>`;
  $tableSearch.append(newRow);
});

关键改动说明 #

1. 修复表头结构：用一个<tr>包裹三个<th>，确保HTML标签闭合正确，符合表格的标准结构。
2. 独立生成数据行：每条数据都创建一个新的<tr>元素，把对应的单元格内容填充进去后，再将整个行追加到表格中，保证每条数据都是单独的一行。
3. 优化可读性：使用ES6模板字符串（${}语法）拼接HTML，比传统的字符串拼接更清晰，不易出错。
4. 清空表格：添加empty()方法确保表格在渲染新数据前清空旧内容，避免重复渲染时出现混乱。

内容的提问来源于stack exchange，提问作者Test Check