如何缩短表格中重复的空<td>代码？Ajax实时更新场景

嘿，我明白你现在的情况——用一堆重复的空<td>搭表格初始结构，再靠Ajax实时更新数据对吧？这种做法虽然能跑，但代码冗余得有点头疼，给你几个实用的优化方案，让代码更清爽好维护：

1. 用JS动态生成空列，替代硬编码重复<td> #

与其手动敲21个<td></td>，不如让JavaScript帮你生成，后续要改列数只需要改个数字就行，代码瞬间干净：

// 页面加载完成后自动生成空列
document.addEventListener('DOMContentLoaded', function() {
  const targetRow = document.querySelector('.fff'); // 选中你那个带fff类的行
  const totalColumns = 21; // 列数，想改直接调这个数
  
  for(let i = 0; i < totalColumns; i++) {
    const emptyTd = document.createElement('td');
    targetRow.appendChild(emptyTd);
  }
});

对应的HTML只需要保留最基础的结构：

<table>
  <tr class="fff"></tr>
</table>

2. 结合Ajax更新，直接渲染数据行 #

其实你甚至可以不用提前生成空列，等Ajax拿到数据后直接生成对应列，一步到位：

// 定义更新表格的函数，传入Ajax返回的数据
function refreshTable(data) {
  const targetRow = document.querySelector('.fff');
  targetRow.innerHTML = ''; // 先清空现有内容
  
  // 遍历数据生成每一列
  data.forEach(item => {
    const td = document.createElement('td');
    td.textContent = item; // 如果需要HTML内容就用innerHTML
    targetRow.appendChild(td);
  });
}

// 举个用fetch做Ajax请求的例子
fetch('/your-data-endpoint')
  .then(res => res.json())
  .then(data => refreshTable(data))
  .catch(err => console.log('数据加载出问题啦:', err));

这样初始状态下表格行是空的，但你可以用CSS给它加个占位样式，保证视觉上的结构感。

3. 用CSS搞定空表格的视觉占位 #

如果需要初始状态下表格有边框、行高这些视觉结构，完全不用依赖空<td>，CSS就能搞定：

table {
  border-collapse: collapse;
  width: 100%;
}
tr.fff {
  /* 给空行设置高度，保证能看到表格结构 */
  height: 40px;
}
tr.fff td {
  border: 1px solid #ddd;
  /* 21列平均分配宽度 */
  width: calc(100% / 21);
}

哪怕行里没有<td>，也可以给<tr>加样式，或者如果担心兼容性，也可以只生成一个占位<td>跨21列，等数据来了再替换。

这些方案不管是维护性还是灵活性都比硬编码一堆空<td>强很多，你可以根据自己的需求选合适的~

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