jQuery遍历表格行的for each中添加嵌套循环后后续列丢失如何解决

问题根源 #

你代码的问题出在对$.each返回值的认知错误：

• jQuery的$.each方法执行后返回的是被遍历的原始数组/对象，不会返回你循环内部产生的字符串内容
• 你直接把$.each写在字符串拼接的+运算符中间，相当于把数组对象强制转为字符串插入到HTML结构中，会直接打断后续的字符串拼接逻辑，甚至产生语法错误，导致<td>之后的列内容完全没有被拼接到tbody变量里，自然就不会渲染出来。

修复方案 #

你需要先单独声明变量存储第二层循环生成的HTML内容，再把这个变量拼到对应的<td>位置：

var tbody="";
const arr = ['one','two','three','four','five'];
$.each(response.all_groups, function (key, group) {
    // 先定义变量存储第二层循环的内容
    let innerTdContent = '';
    $.each(arr, function(index, value) { 
        // 把你需要展示的内容拼到这个变量里，此处示例为每个值换行展示
        innerTdContent += value + '<br>';
        console.log(value); 
    }); 

    tbody+='<tr>'+ 
                '<td><p class="font-weight-bold mb-0">'+group.group_id+'</p>'+group.group_description+'</td>'+ 
                '<td>'+group.group_type_name+'</td>'+ 
                // 把提前拼好的内容插入到td中
                '<td>'+ innerTdContent +'</td>'+ 
                '<td>'+getgroupstatus(group.effective_start_datetime, group.effective_end_datetime)+'</td>'+ 
                '<td>'+ 
                    '<button type="button" value="'+group.id+'" class="edit_group btn btn-outline-secondary"><i class="fas fa-edit"></i> Edit</button> '+ 
                    '<button type="button" value="'+group.group_id+'" title="delete '+ group.group_name +'" class="delete_group btn btn-outline-secondary"><i class="fas fa-trash"></i> Delete</button>'+ 
                '</td>'+ 
            '</tr>';
});

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