如何用JavaScript从列表生成2列HTML表格并清空表格？

一、正确生成2列表格的实现方法 #

原代码的问题在于row_Index逻辑处理混乱：比如处理第3个元素时，row_Index重置为0但未立即生成新行，最后一个元素处理完后未闭合未完成的<tr>标签，同时频繁操作innerHTML会引发不必要的DOM重绘。

推荐两种实现思路，均能按要求生成表格：

方法1：字符串拼接方式（简洁直观） #

function showWords() {
  const words = ['ac', 'bd', 'bf','uy','ca'];
  const table = document.getElementById("wordTable");
  let html = '';
  
  // 每2个元素为一组生成一行
  for (let i = 0; i < words.length; i += 2) {
    html += '<tr>';
    // 添加当前元素的单元格
    html += `<td>${words[i]} </td>`;
    // 若存在下一个元素则添加，否则补空单元格
    html += i + 1 < words.length ? `<td>${words[i+1]} </td>` : '<td> </td>';
    html += '</tr>';
  }
  
  table.innerHTML = html;
}

方法2：DOM元素创建方式（性能更优） #

function showWords() {
  const words = ['ac', 'bd', 'bf','uy','ca'];
  const table = document.getElementById("wordTable");
  // 先清空表格避免重复生成
  clearTable();
  
  for (let i = 0; i < words.length; i += 2) {
    const row = document.createElement('tr');
    
    // 创建第一个单元格
    const cell1 = document.createElement('td');
    cell1.textContent = words[i] + ' ';
    row.appendChild(cell1);
    
    // 创建第二个单元格，存在元素则赋值，否则为空
    const cell2 = document.createElement('td');
    cell2.textContent = i + 1 < words.length ? words[i+1] + ' ' : ' ';
    row.appendChild(cell2);
    
    table.appendChild(row);
  }
}

二、清空表格所有行和列的正确方法 #

clear()不是HTML表格元素的方法，remove()会直接删除整个表格，都不符合需求。正确方式有两种：

方法1：清空表格innerHTML #

function clearTable() {
  const table = document.getElementById("wordTable");
  table.innerHTML = '';
}

方法2：删除表格所有子节点 #

function clearTable() {
  const table = document.getElementById("wordTable");
  // 循环删除所有子元素，直到表格为空
  while (table.firstChild) {
    table.removeChild(table.firstChild);
  }
}

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