单元格为空时HTML表格无法显示，求可正常渲染的解决方法

我搭建了一个简单的HTML表格，通过JavaScript向单元格导入数据，同时包含一个按钮，代码如下：

<tr class="row100">
 <td class="column100 column1" data-column="column1">${Store1v1}</td>
 <td class="column100 column2" data-column="column2">${Region1v1}</td>
 <td class="column100 column3" data-column="column3">${Edition1v1}</td>
 <td class="column100 column4" data-column="column4">${StockStatus1v1}</td>
 <td class="column100 column5" data-column="column5">${Price1} €</td>
 <td class="column100 column6" data-column="column6"><a href="${Affiliate1}" class="button">Shop Now</a></td>
</tr>

这是一个10行6列的表格，目前遇到问题：当存在数据缺失（单元格为空）时，表格完全无法显示。请问是否有办法实现即使单元格为空，表格仍能正常渲染？（这是一个TOP10低价商品网站，部分情况下无法获取全部10行数据，只要有单元格为空表格就不显示）

这个问题我做商品列表的时候也碰到过，核心原因是当模板变量为空或未定义时，会输出undefined或者破坏HTML结构，导致浏览器无法正确解析表格。这里有几个具体的解决方法：

1. 给模板变量设置默认空值 #

在模板字符串里，给每个可能为空的变量加上默认值，确保即使数据缺失，单元格也能输出合法的空内容，而不是undefined或者无效标签。

修改你的代码如下：

<tr class="row100">
  <td class="column100 column1" data-column="column1">${Store1v1 || ''}</td>
  <td class="column100 column2" data-column="column2">${Region1v1 || ''}</td>
  <td class="column100 column3" data-column="column3">${Edition1v1 || ''}</td>
  <td class="column100 column4" data-column="column4">${StockStatus1v1 || ''}</td>
  <!-- 价格字段单独处理，避免出现"undefined €"的情况 -->
  <td class="column100 column5" data-column="column5">${Price1 ? `${Price1} €` : ''}</td>
  <!-- 链接字段也要判断，避免生成href="undefined"的无效链接 -->
  <td class="column100 column6" data-column="column6">${Affiliate1 ? `<a href="${Affiliate1}" class="button">Shop Now</a>` : ''}</td>
</tr>

2. 优化表格渲染的JS逻辑 #

如果你的10行是通过循环生成的，要注意处理数据不足10条的情况：

• 不要强制循环10次，而是循环现有数据的长度，剩余的行可以选择不渲染，或者用空数据填充
• 每次循环时，给不存在的商品数据默认一个空对象，避免访问未定义的属性

举个JS渲染的例子：

// 假设data是你的商品数据数组，最多10条
const tableBody = document.querySelector('#your-table-body-id');
// 循环最多10次，或者数据的实际长度，按需选择
for (let i = 0; i < Math.min(data.length, 10); i++) {
  // 如果当前索引没有数据，用空对象兜底
  const item = data[i] || {};
  const rowHTML = `
    <tr class="row100">
      <td class="column100 column1" data-column="column1">${item.Store1v1 || ''}</td>
      <td class="column100 column2" data-column="column2">${item.Region1v1 || ''}</td>
      <td class="column100 column3" data-column="column3">${item.Edition1v1 || ''}</td>
      <td class="column100 column4" data-column="column4">${item.StockStatus1v1 || ''}</td>
      <td class="column100 column5" data-column="column5">${item.Price1 ? `${item.Price1} €` : ''}</td>
      <td class="column100 column6" data-column="column6">${item.Affiliate1 ? `<a href="${item.Affiliate1}" class="button">Shop Now</a>` : ''}</td>
    </tr>
  `;
  tableBody.innerHTML += rowHTML;
}

3. 确保HTML结构完整性 #

有时候表格不显示是因为生成的HTML有语法错误（比如未闭合的标签、无效的属性值），所以一定要保证每个<td>标签都能正确闭合，属性值（比如href）要么是合法的URL，要么就不要渲染对应的标签。

按照上面的方法处理后，即使部分单元格为空，表格的DOM结构依然是完整的，浏览器就能正常渲染表格了。

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