如何用jQuery的$.each函数为tr动态添加td值？代码异常求助

问题描述 #

我写了一段JS代码，通过AJAX获取数据后动态给表格的<tr>添加<td>，代码如下：

function salesList() {
    $.ajax({
        url: location.href + 'sales',
        method: "post",
        success: function (response) {
            $("#data-table").html('');
            let data_keys = [];
            let output = "";
            data_keys = Object.keys(response.data[0]);
            $("#data-table").append("<thead><tr></tr></thead>");
            $.each(data_keys, function (key, value) {
                value = value.replace(/_/g, " ");
                $("#data-table>thead>tr").append("<td>" + value.toUpperCase(value) + "</td>")
            });

            $("#data-table").append("<tbody></tbody>");

            response.data.map(function (values) {
                output += "<tr>" +
                    $.each(values, function (key, value) {
                        output += "<td>" + value + "</td>"
                        console.log(value);
                    });
                + "</tr>";
            })
            $("#data-table>tbody").html(output);
        }
    });
}

遇到的问题：浏览器检查器中能看到<tr>被添加，但<tr>内的<td>并未显示在表格中，不过控制台的console.log(value)能正常打印对应的值。

以下是简化的测试代码：

测试JS代码 #

const data = [{
  one: 'one'
}, {
  two: 'two'
}];
let output;

data.map(function(values) {
  output += "<tr>" +
    $.each(values, function(key, value) {
      output += "<td>" + value + "</td>"
      console.log(value);
    }); +
  "</tr>";
})

$("#data-table>tbody").html(output);

测试HTML代码 #

<table id="data-table">
  <tbody></tbody>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

错误原因 #

1. $.each返回值干扰结构：$.each()方法返回的是被遍历的原对象，不是拼接后的字符串。你在字符串拼接里直接插入$.each(...)，会把对象转换成[object Object]插入到<tr>标签中间，导致HTML结构错乱，浏览器无法正确解析<td>。
2. output初始值未定义：测试代码里let output;未赋值，初始值为undefined，第一次拼接时会把undefined作为开头，破坏HTML结构。

修复后的代码 #

原业务代码修复版 #

function salesList() {
    $.ajax({
        url: location.href + 'sales',
        method: "post",
        success: function (response) {
            $("#data-table").html('');
            const data_keys = Object.keys(response.data[0]);
            // 构建表头
            const thead = $("<thead><tr></tr></thead>");
            $.each(data_keys, function (key, value) {
                value = value.replace(/_/g, " ").toUpperCase();
                thead.find("tr").append(`<td>${value}</td>`);
            });
            $("#data-table").append(thead);

            // 构建tbody
            const tbody = $("<tbody></tbody>");
            response.data.forEach(function (values) {
                const tr = $("<tr></tr>");
                $.each(values, function (key, value) {
                    tr.append(`<td>${value}</td>`);
                });
                tbody.append(tr);
            });
            $("#data-table").append(tbody);
        }
    });
}

简化测试代码修复版 #

const data = [{
  one: 'one'
}, {
  two: 'two'
}];
let output = ""; // 初始化空字符串

data.forEach(function(values) {
  let trContent = "<tr>";
  $.each(values, function(key, value) {
    trContent += "<td>" + value + "</td>";
  });
  trContent += "</tr>";
  output += trContent;
})

$("#data-table>tbody").html(output);

修复说明 #

• 避免在字符串拼接中嵌套$.each：改用先构建每行内容再拼接，或直接创建jQuery元素动态添加<td>，逻辑更直观且不易出错。
• 确保output初始值为空字符串：避免undefined破坏HTML结构。
• 使用模板字符串简化拼接，同时修正toUpperCase的错误用法（该方法无需传参）。

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