使用 jQuery 在表格中根据状态值显示对应文本的教程-html教程-PHP中文网

使用 jQuery 在表格中根据状态值显示对应文本的教程

碧海醫心

发布： 2025-09-09 17:46:24

原创

243人浏览过

使用 jquery 在表格中根据状态值显示对应文本的教程

本文介绍了如何使用 jQuery 和 JavaScript 在表格中根据状态值动态显示对应的文本信息。通过创建一个状态文本映射函数，并将其应用于表格数据的渲染过程，可以有效地提高代码的可读性和可维护性，避免冗长的 if-else 语句。

在动态生成表格时，经常需要根据数据的某个字段值来显示不同的文本信息。例如，status 字段可能存储的是数字代码，而我们需要在表格中显示对应的状态描述，如 "open"、"pending"、"resolved" 等。直接在表格生成的循环中使用 if-else 语句虽然可行，但当状态较多时，代码会变得冗长且难以维护。本文将介绍一种更优雅、更易于维护的方法来实现这一功能。

1. 创建状态文本映射函数

首先，创建一个 JavaScript 函数，该函数接收状态值作为输入，并返回对应的文本描述。可以使用一个对象来存储状态值和文本之间的映射关系。

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

function getStatusText(status) {
  return statusText[status] || 'unknown'; // 如果 statusText[status] 不存在返回 'unknown'
}

登录后复制

在这个函数中，statusText 对象存储了状态值和对应文本的映射关系。getStatusText 函数接收一个 status 参数，并在 statusText 对象中查找对应的文本。如果找不到对应的文本，则返回 "unknown"，这是一种良好的错误处理机制，可以避免在表格中显示空白或错误信息。

2. 在表格渲染中使用该函数

接下来，在表格渲染过程中，调用 getStatusText 函数来获取状态对应的文本，并将其插入到表格单元格中。假设你使用 jQuery 来动态生成表格。

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

// 假设 interaction_search 是包含表格数据的数组
for (let i = 0; i < interaction_search.length; i++) {
  let 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); // 假设你的表格 id 是 myTable
}

登录后复制

在这个例子中，我们使用模板字符串来构建表格的每一行。在 <td> 元素中，我们调用 getStatusText(interaction_search[i].status) 来获取状态对应的文本，并将其插入到表格单元格中。

3. 完整示例

<!DOCTYPE html>
<html>
<head>
  <title>Table with Status</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      const statusText = {
        2: 'open',
        3: 'pending',
        4: 'resolved',
        5: 'closed'
      };

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

      // 模拟数据
      const interaction_search = [
        { id: 1, created_at: '2023-10-26', status: 2, subject: 'Subject 1', due_by: '2023-10-27' },
        { id: 2, created_at: '2023-10-27', status: 3, subject: 'Subject 2', due_by: '2023-10-28' },
        { id: 3, created_at: '2023-10-28', status: 4, subject: 'Subject 3', due_by: '2023-10-29' },
        { id: 4, created_at: '2023-10-29', status: 5, subject: 'Subject 4', due_by: '2023-10-30' },
        { id: 5, created_at: '2023-10-30', status: 6, subject: 'Subject 5', due_by: '2023-10-31' } // 包含一个未知状态
      ];

      // 渲染表格
      for (let i = 0; i < interaction_search.length; i++) {
        let 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>
        `;
        $('#myTable tbody').append(row);
      }
    });
  </script>
</head>
<body>
  <table id="myTable">
    <thead>
      <tr>
        <th>ID</th>
        <th>Date</th>
        <th>Status</th>
        <th>Subject</th>
        <th>Resolution</th>
      </tr>
    </thead>
    <tbody>
      <!-- 表格内容将在这里动态生成 -->
    </tbody>
  </table>
</body>
</html>

登录后复制

注意事项：

确保 jQuery 库已正确引入。
interaction_search 数组是包含表格数据的数组。你需要根据实际情况替换为你的数据源。
#myTable tbody 是表格 <tbody> 元素的 jQuery 选择器。你需要根据实际情况替换为你的表格的 <tbody> 元素的 ID 或类名。
如果 statusText 对象中缺少某个状态值的映射，getStatusText 函数将返回 "unknown"。你可以根据需要修改默认返回值。

总结：

使用状态文本映射函数可以有效地简化表格渲染代码，提高代码的可读性和可维护性。这种方法尤其适用于状态较多、需要在多个地方使用状态文本的情况。通过将状态值和文本之间的映射关系集中管理，可以避免代码冗余，并方便后续的修改和扩展。此外，利用三元运算符或者 || 运算符可以优雅地处理未知状态值，避免显示错误信息。

以上就是使用 jQuery 在表格中根据状态值显示对应文本的教程的详细内容，更多请关注php中文网其它相关文章！