如何在JavaScript动态生成的表格中为<td>元素添加不同类？

嘿，我看了你的代码，发现几个小问题导致样式类加不上，咱们一步步来搞定：

问题分析 #

1. 语法错误：你代码里value1后面少了一个+号，这会直接导致JavaScript报错，代码根本无法正常执行，样式类自然也没法生效。
2. 嵌套表格结构不规范：内部表格里的两个<td>没有用<tr>包裹，不符合HTML的表格结构规范，浏览器可能会自动修正DOM结构，间接影响样式的应用。
3. 字符串拼接细节问题：如果之前你尝试加类时引号使用不当（比如外层用双引号，内层也用双引号没转义），也会导致标签解析出错。

修正后的代码方案 #

方案1：用ES6模板字符串（推荐，更易读） #

模板字符串可以直接换行，还能避免繁琐的字符串拼接，加样式类非常直观：

// 先初始化外层表格（注意如果之前已有初始化，调整即可）
let table = "<table>";
table += "<tr>";
for(var i = 0; i < data.list.length; i++){
  // 给两个<td>分别指定不同的类名
  table += `
    <td>
      <table>
        <tr>
          <td class="value-style-1">${value1}</td>
          <td class="value-style-2">${value2}</td>
        </tr>
      </table>
    </td>
  `;
}
table += "</tr></table>";

方案2：传统字符串拼接（兼容旧环境） #

如果项目不能用ES6语法，就用普通字符串拼接，注意引号的使用（内层用单引号，或者转义双引号）：

let table = "<table>";
table += "<tr>";
for(var i = 0; i < data.list.length; i++){
  table += "<td>" +
              "<table>" +
                "<tr>" +
                  "<td class='value-style-1'>" + value1 + "</td>" +
                  "<td class='value-style-2'>" + value2 + "</td>" +
                "</tr>" +
              "</table>" +
            "</td>";
}
table += "</tr></table>";

额外提醒 #

别忘了在CSS里定义对应的样式类，比如：

.value-style-1 {
  color: #ff0000;
  padding: 8px;
}
.value-style-2 {
  color: #0066cc;
  background-color: #f5f5f5;
}

这样两个<td>就能分别应用不同的样式啦！

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