jQuery动态表格追加数组单元格数据异常问题求解

问题现象 #

开发时向动态表格追加单元格，将子Label文本填充为数组对应数据，代码运行无报错，但最终仅展示包含最早一条数据的单元格。
初始实现代码：

for (i=0; i < response.array.length; i++) {
    console.log(response.array[i].Sender)
    $('.name').html(response.array[i].Sender);
    $('.date').html(response.array[i].Date);
    $('.subject').html(response.array[i].Subject);
    
    cell.append(name);
    cell.append(date);
    cell.append(subject);
    $('#table').append(cell);
}

后续两次修改尝试均未解决问题：

• 第一次尝试拼接HTML字符串实现，无法将Label放入单元格内，代码如下：

for (i=0; i < response.array.length; i++) {
    trHTML += '<tr><td>' + response.array[i].Sender + '<td><td>' + response.array[i].Date  +'<td><td>' + response.array[i].Subject + '<td><tr>'
}

• 第二次调整拼接逻辑后，第一个单元格可正常显示，其余数据均显示为[object Object][object Object][object Object][object Object]，对应代码：

trHTML += $('.name').html(response.array[i].Sender) + $('.date').html(response.array[i].Date) + $('.subject').html(response.array[i].Subject);

根因分析 #

1. 初始代码问题：
   • 循环中没有新建cell、name/date/subject这些DOM元素，全程在复用同一个DOM节点，DOM操作中append已存在的节点时，只会把节点从原有位置移动到新位置，不会复制生成新节点；另外$('.name')这类选择器是全局查找页面上已有元素，循环里反复执行只会覆写已有元素的内容，根本不会生成新标签，最后只会保留最后一次循环的赋值结果。
2. 第一次字符串拼接问题：
   • HTML标签语法错误，所有<td>都没有写闭合标签</td>，行尾的<tr>是错误的开始标签，应该用</tr>闭合整行；同时拼接内容里根本没写Label标签结构，自然无法把Label放入单元格。
3. 第二次拼接问题：
   • $('.name').html(xxx)的返回值是jQuery对象，不是纯字符串，直接和字符串做拼接时，JS会自动调用对象的toString()方法，最终输出[object Object]。

修正方案 #

方案1：DOM节点创建方式（适合需要绑定事件、后续操作DOM元素的场景） #

每次循环时新建独立的行、单元格、Label节点，避免复用同一个DOM对象：

// 循环前清空表格原有内容避免重复渲染
$('#table').empty();
for (let i = 0; i < response.array.length; i++) {
    // 每次循环新建独立的行元素
    const row = $('<tr></tr>');
    // 新建每个单元格和内部Label，直接赋值文本
    const nameCell = $('<td></td>').append($('<label class="name"></label>').text(response.array[i].Sender));
    const dateCell = $('<td></td>').append($('<label class="date"></label>').text(response.array[i].Date));
    const subjectCell = $('<td></td>').append($('<label class="subject"></label>').text(response.array[i].Subject));
    // 单元格拼入行
    row.append(nameCell, dateCell, subjectCell);
    // 行拼入表格
    $('#table').append(row);
}

方案2：HTML字符串拼接方式（性能更优，适合纯展示场景） #

修正标签闭合逻辑，把Label结构直接拼入字符串，不要在拼接过程中调用jQuery方法：

let trHTML = '';
for (let i = 0; i < response.array.length; i++) {
    // 正确闭合td、tr标签，直接把label结构写入td内部
    trHTML += `
    <tr>
        <td><label class="name">${response.array[i].Sender}</label></td>
        <td><label class="date">${response.array[i].Date}</label></td>
        <td><label class="subject">${response.array[i].Subject}</label></td>
    </tr>
    `;
}
// 循环结束后一次性把拼接好的HTML写入表格，减少DOM重绘次数
$('#table').html(trHTML);

注意：如果接口返回的内容包含用户输入的特殊字符，直接拼接字符串存在XSS风险，这种场景优先选择DOM创建方式，或者对文本内容做HTML转义后再拼接。

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