如何实现动态生成X行Y列的表格？求不同于参考代码的实现方案

你提供的参考实现依赖jQuery，且存在频繁操作DOM触发多次重排的问题，大行列数场景下性能较差，下面提供几个不同方向的可选实现：

方案1：纯原生JS字符串拼接（无依赖、性能最优） #

先在内存中拼接完整的HTML字符串，仅做一次DOM插入，只触发一次页面重排，渲染速度远高于频繁append的实现。

function makeGrid(x, y) {
  // x为列数，y为行数
  let html = ''
  for (let line = 1; line <= y; line++) {
    html += `<tr id="table${line}">`
    // 拼接x个单元格
    html += '<td></td>'.repeat(x)
    html += '</tr>'
  }
  document.getElementById('pixelCanvas').innerHTML = html
}

如果需要兼容ES5及更早版本的浏览器，把'<td></td>'.repeat(x)替换为循环拼接即可：

// 兼容ES5的单元格拼接逻辑
var tdHtml = ''
for (var col = 1; col <= x; col++) {
  tdHtml += '<td></td>'
}

方案2：原生DOM节点创建（灵活性高，方便绑定属性/事件） #

如果需要在创建单元格时直接添加事件监听、自定义类名/属性，用DOM API配合文档碎片实现，所有节点操作都在内存中完成，同样仅触发一次DOM更新。

function makeGrid(x, y) {
  // 创建文档碎片，避免多次DOM插入
  const fragment = document.createDocumentFragment()
  for (let line = 1; line <= y; line++) {
    const tr = document.createElement('tr')
    tr.id = `table${line}`
    for (let col = 0; col < x; col++) {
      const td = document.createElement('td')
      // 可直接在这里给td加事件、类名等：td.addEventListener('click', xxx)
      tr.appendChild(td)
    }
    fragment.appendChild(tr)
  }
  document.getElementById('pixelCanvas').appendChild(fragment)
}

方案3：jQuery优化版（保留jQuery依赖，精简代码提升性能） #

如果项目已经引入jQuery不想切换技术栈，可以优化原方案的频繁append逻辑，减少DOM操作次数。

function makeGrid(x, y) {
  let html = ''
  for (let line = 1; line <= y; line++) {
    html += `<tr id="table${line}">${'<td></td>'.repeat(x)}</tr>`
  }
  $('#pixelCanvas').html(html)
}

该实现比原参考代码减少了y*x次DOM操作，性能提升明显，代码也更精简。

内容的提问来源于stack exchange，提问作者Reinaldo Lopez Hernandez