使用 jQuery 在表格中根据条件显示状态信息

本文介绍了如何在 jQuery 表格中，根据 interaction_search[i].status 的值，动态显示不同的状态文本。通过创建一个函数，将状态码映射到对应的文本，可以简化代码并提高可读性，避免在 HTML 模板中直接编写复杂的 if...else if... 语句。

在动态生成 HTML 表格时，经常需要根据数据的不同状态显示不同的文本信息。直接在 HTML 模板中使用大量的 if...else if... 语句不仅代码冗余，而且可维护性差。本文将介绍如何使用 JavaScript 函数和对象，更优雅地实现这一功能。

实现思路

1. 创建状态映射对象： 定义一个 JavaScript 对象，将状态码作为键，对应的状态文本作为值。
2. 创建状态转换函数： 创建一个函数，接收状态码作为参数，根据状态映射对象返回对应的状态文本。如果状态码不存在于映射对象中，可以返回一个默认值，例如 "unknown"。
3. 在 HTML 模板中调用函数： 在生成 HTML 表格时，调用状态转换函数，将 interaction_search[i].status 作为参数传入，获取对应的状态文本，并将其插入到 <td> 元素中。

示例代码

const statusText = {
  2: 'open',
  3: 'pending',
  4: 'resolved',
  5: 'closed',
};

function getStatusText(status) {
  return statusText[status] || 'unknown';
}

// 假设 interaction_search 是一个包含数据的数组
for (let i = 0; i < interaction_search.length; i++) {
  const row = `
    <tr>
      <td id="id">${interaction_search[i].id}</td>
      <td id="date">${interaction_search[i].created_at}</td>
      <td id="status">${getStatusText(interaction_search[i].status)}</td>
      <td id="sub">${interaction_search[i].subject}</td>
      <td id="resolution">${interaction_search[i].due_by}</td>
    </tr>
  `;

  // 将 row 添加到表格中，例如：
  // $('#myTable tbody').append(row);
}

代码解释

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

26

查看详情

• statusText 对象定义了状态码和对应文本的映射关系。
• getStatusText 函数接收一个状态码 status 作为参数。它首先尝试从 statusText 对象中获取对应的文本。如果 statusText 对象中不存在该状态码，则返回 'unknown'。
• 在循环中，我们使用模板字符串构建 HTML 字符串，并在 <td> 元素中使用 getStatusText(interaction_search[i].status) 获取对应的状态文本。

注意事项

• interaction_search 变量需要提前定义并包含数据。
• 需要使用 jQuery 或其他 DOM 操作库将生成的 HTML 字符串添加到表格中。
• 可以根据实际需求修改 statusText 对象中的状态码和文本。
• 'unknown' 可以替换成其他默认值，例如空字符串 ''。

总结

通过使用 JavaScript 对象和函数，我们可以有效地将状态码转换为对应的文本，并将其动态地显示在 HTML 表格中。这种方法不仅简化了代码，提高了可读性，而且更易于维护和扩展。相比于直接在 HTML 模板中使用大量的 if...else if... 语句，这种方法更加优雅和高效。

以上就是使用 jQuery 在表格中根据条件显示状态信息的详细内容，更多请关注php中文网其它相关文章！