点击stop按钮后HTML表格无法渲染的技术求助

问题描述 #

点击id为"stop"的按钮时，希望将sessionStorage中的JavaScript对象数组渲染为HTML表格，但浏览器始终无法正常显示表格。现有代码如下：

HTML代码 #

<table id="tbody"></table>

JavaScript代码 #

stop.addEventListener("click", () => {
  container.style.display = "none";
  stop.style.display = "none";
  tbody.style.display = "block";

  ratings = JSON.parse(sessionStorage.ratings);
  for (let i = 0; i < ratings.length; i++) {
      let tr = "<tr>";
      tr += "<td>" + ratings[i].key.toString() + "</td>" + "<td>" + ratings[i].value.toString() + "</td></tr>";
      tbody.innerHTML += tr;
  }
});

核心问题分析 #

1. 元素ID命名错误：将<table>的id设为tbody，混淆了表格元素与表格主体<tbody>的概念，导致JS操作的对象是整个表格而非表格主体，易引发DOM结构异常。
2. Display属性设置错误：给<table>设置display: block会破坏表格默认布局规则（表格默认display: table），导致单元格无法正常对齐、渲染异常。
3. 变量未声明+缺乏错误处理：ratings未用let/const声明，可能引发全局变量污染；同时未对sessionStorage.ratings的存在性、格式正确性做校验，若数据异常会直接中断代码执行。

修复方案 #

步骤1：修正HTML结构 #

给表格设置合理ID，并明确添加<tbody>用于承载表格行：

<table id="ratingsTable">
  <tbody id="tableBody"></tbody>
</table>

步骤2：修正JavaScript代码 #

// 获取所有需要操作的DOM元素
const stopBtn = document.getElementById('stop');
const container = document.getElementById('container');
const ratingsTable = document.getElementById('ratingsTable');
const tableBody = document.getElementById('tableBody');

stopBtn.addEventListener('click', () => {
  // 隐藏不需要的元素
  container.style.display = 'none';
  stopBtn.style.display = 'none';
  // 恢复表格默认的display属性
  ratingsTable.style.display = 'table';

  try {
    // 安全获取并解析sessionStorage数据
    const ratingsData = sessionStorage.getItem('ratings');
    if (!ratingsData) throw new Error('无可用评分数据');
    
    const ratings = JSON.parse(ratingsData);
    if (!Array.isArray(ratings)) throw new Error('数据格式错误，需为数组');

    // 一次性拼接所有表格行，提升渲染效率
    let rowsHtml = '';
    ratings.forEach(item => {
      // 处理可能的空值，避免报错
      const key = item?.key?.toString() || '';
      const value = item?.value?.toString() || '';
      rowsHtml += `<tr><td>${key}</td><td>${value}</td></tr>`;
    });

    tableBody.innerHTML = rowsHtml;
  } catch (error) {
    // 捕获错误并给出提示
    console.error('表格渲染失败:', error);
    tableBody.innerHTML = '<tr><td colspan="2">数据加载失败，请检查控制台</td></tr>';
  }
});

额外排查点 #

• 打开浏览器开发者工具（F12）控制台，查看是否有DOM元素未找到、JSON解析失败等报错信息；
• 确认sessionStorage.ratings存储的是包含key和value属性的数组格式数据；
• 不要随意修改表格元素的display属性，保持默认的table/table-row-group等值才能保证表格布局正常。

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