求助：动态创建含图片的三列卡片表格（不可手动添加行列）

先看看你代码里的几个核心问题，我一个个给你理清楚：

主要问题点 #

• 选择器与变量不匹配：你创建了原生DOM元素$table，但用$('#table')去查找——这个元素根本没设置id="table"，而且原生DOM对象不能直接用jQuery的选择器方法，两者混用导致操作完全无效。
• 表格结构错误：HTML表格的正确层级是table > tbody > tr > td，你直接往table的"body"（实际是tbody）零散append tr和td的方式不符合规范，也无法构建正确的表格结构。
• 重复复用同一个DOM元素：你只创建了一个$image元素，循环里反复append它只会把它移动到新位置，不会生成新的图片节点，最后页面只会显示一张图。
• 逻辑混乱：一会儿把table塞到card里，一会儿又把image直接塞到card里，完全打乱了"表格→行→单元格→图片"的层级关系。

修正后的代码（统一用jQuery实现，更简洁） #

$(function() {
  // 1. 创建卡片容器并添加到body
  var $cardContainer = $('<div class="card-wrapper"></div>').appendTo('body');
  
  // 2. 创建表格和行元素
  var $table = $('<table></table>');
  var $row = $('<tr></tr>').appendTo($table);
  
  // 3. 循环生成3个单元格及对应图片
  for (var i = 0; i < 3; i++) {
    // 每次循环创建新的图片元素，避免复用导致的重复移动问题
    var $image = $('<img>', {
      src: '/images/ACE.jpg',
      alt: 'Card ' + (i + 1)
    });
    // 创建单元格，插入图片后添加到行中
    $('<td></td>').append($image).appendTo($row);
  }
  
  // 4. 将完整表格放入卡片容器
  $cardContainer.append($table);
});

代码说明 #

• DOM就绪判断：用$(function(){})包裹代码，确保在页面DOM完全加载后执行（即使当前body为空，这也是前端开发的标准习惯）。
• 层级清晰：严格按照卡片容器 → 表格 → 行 → 单元格 → 图片的顺序构建DOM，符合HTML规范。
• 独立元素生成：在循环内部创建新的图片元素，保证每个单元格都有独立的图片节点。
• 统一操作方式：全程使用jQuery操作DOM，避免原生DOM与jQuery混用的混乱，代码更易读维护。

原生DOM实现版本（可选） #

如果你更倾向于原生JS，也可以用下面的代码：

document.addEventListener('DOMContentLoaded', function() {
  // 创建卡片容器
  const cardWrapper = document.createElement('div');
  cardWrapper.className = 'card-wrapper';
  document.body.appendChild(cardWrapper);
  
  // 创建表格和行
  const table = document.createElement('table');
  const row = document.createElement('tr');
  table.appendChild(row);
  
  // 循环生成单元格和图片
  for (let i = 0; i < 3; i++) {
    const td = document.createElement('td');
    const img = document.createElement('img');
    img.src = '/images/ACE.jpg';
    img.alt = 'Card ' + (i + 1);
    td.appendChild(img);
    row.appendChild(td);
  }
  
  // 将表格加入卡片容器
  cardWrapper.appendChild(table);
});

这样就能实现你想要的横向排列3张卡片的表格，所有元素都是动态生成的，完全符合你的要求~

内容的提问来源于stack exchange，提问作者Full-Stack