jQuery动态渲染表格时如何使用if条件处理status字段展示

核心原则：状态值转换逻辑必须在表格行HTML字符串拼接之前执行，不要等DOM渲染完成后再修改，避免额外DOM操作开销。

实现方式1：直接嵌入现有循环逻辑 #

你只需要把写好的if判断，挪到遍历数组的循环内部、拼接tr模板的代码之前即可，示例完整代码：

// 表格渲染循环
for (let i = 0; i < interaction_search.length; i++) {
  const currentRow = interaction_search[i];
  // 先执行状态转换
  if (currentRow.status === "2") {
    currentRow.status = "open";
  } else if (currentRow.status === "3") {
    currentRow.status = "pending";
  } else if (currentRow.status === "4") {
    currentRow.status = "resolved";
  } else if (currentRow.status === "5") {
    currentRow.status = "closed";
  }

  // 转换完成后再拼接行HTML，此时取到的status已经是格式化后的文本
  const trTemplate = `<tr>
            <td class="id">${currentRow.id}</td>
            <td class="date">${currentRow.created_at}</td>
            <td class="status">${currentRow.status}</td>
            <td class="sub">${currentRow.subject}</td>
            <td class="resolution">${currentRow.due_by}</td>
</tr>`;
  // 把拼接好的行追加到表格tbody中即可，例如：
  // $('#interactionTable tbody').append(trTemplate);
}

实现方式2：映射表优化（推荐） #

多分支if判断后续维护麻烦，可以用对象键值对做状态映射，代码更简洁：

// 循环外定义一次映射表即可
const STATUS_TEXT_MAP = {
  "2": "open",
  "3": "pending",
  "4": "resolved",
  "5": "closed"
};

for (let i = 0; i < interaction_search.length; i++) {
  const currentRow = interaction_search[i];
  // 一行代码完成状态转换，匹配不到值时默认显示unknown
  currentRow.status = STATUS_TEXT_MAP[currentRow.status] || "unknown";

  // 后续拼接行、追加DOM的逻辑和上面完全一致
  const trTemplate = `<tr>
            <td class="id">${currentRow.id}</td>
            <td class="date">${currentRow.created_at}</td>
            <td class="status">${currentRow.status}</td>
            <td class="sub">${currentRow.subject}</td>
            <td class="resolution">${currentRow.due_by}</td>
</tr>`;
  $('#interactionTable tbody').append(trTemplate);
}

注意事项 #

• 原代码中给循环生成的td加了固定id，会导致页面出现重复id，不符合HTML规范，建议替换为class属性，避免后续DOM选择器出错。
• 如果使用ES6+语法，也可以先用Array.map批量处理所有数据的状态后再统一渲染，核心逻辑顺序不变。

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