表格数据与API对接

<!-- 表格HTML结构示例 -->
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>邮箱</th>
      <th>部门</th>
      <th>状态</th>
      <th>入职日期</th>
    </tr>
  </thead>
  <tbody id="table-body">
    <!-- 数据将通过JavaScript动态生成 -->
  </tbody>
</table>

<!-- API调用示例 -->
<script>
  async function fetchData() {
    try {
      const response = await fetch('https://shop.coidspay.com/sync/form/data?apiKey=bc0b84a6efbc4472b56f8fe12f36ffa');
      const data = await response.json();
      
      const tableBody = document.getElementById('table-body');
      tableBody.innerHTML = '';
      
      data.forEach(employee => {
        const row = document.createElement('tr');
        row.innerHTML = `
          <td>${employee.id}</td>
          <td>${employee.name}</td>
          <td>${employee.email}</td>
          <td>${employee.department}</td>
          <td><span class="status ${employee.status}">${getStatusText(employee.status)}</span></td>
          <td>${employee.joinDate}</td>
        `;
        tableBody.appendChild(row);
      });
    } catch (error) {
      console.error('获取数据失败:', error);
    }
  }
  
  function getStatusText(status) {
    const statusMap = {
      'active': '在职',
      'pending': '试用期',
      'inactive': '离职'
    };
    return statusMap[status] || status;
  }
</script>