原生html table固定表头,后台返回一个数组对象有多个值,根据表头需要的字段显

原生html要实现固定表头并根据需要显示的字段渲染后端返回的数组对象，就需要使用JavaScript来渲染DOM。

HTML部分

html
<table id="data-table">
  <thead>
    <tr>
        <th>姓名</th>
        <th>状态</th>
        <th>开始时间</th>
        <th>结束时间</th>
        <th>是否开始</th>
    </tr>
  </thead>
  <tbody>
    <!-- 动态插入行 -->
  </tbody>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

JavaScript部分

// 假设这是从后端获取的数据
var data = [
  { id: 1, name: 'Alice', status: '完成', startTime: '2024.1.11', endTime: '2024.1.12', isTimeout: '开始',contont:'测试' },
  { id: 2, name: 'Bob', status: '未完成', startTime: '2024.1.11', endTime: '2024.1.12', isTimeout: '开始',contont:'测试' },

  // 更多数据...
];

// 获取表格的tbody元素
var tbody = document.getElementById('data-table').getElementsByTagName('tbody')[0];

// 遍历数据数组，为每个对象创建一行
data.forEach(function(item) {
  var tr = document.createElement('tr');
  ['name', 'status', 'startTime','endTime','isTimeout'].forEach(function(field) {
    var td = document.createElement('td');
    td.textContent = item[field];
    tr.appendChild(td);
  });
  tbody.appendChild(tr);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Css部分

table {
  height: 100%;
  /* width: 100%; */
  border-collapse: collapse;
  /* color: white; */
  text-align: center;

  thead {
    font-size: 14px;
    font-weight: 400;
    /* color: #0CD6FF; */
  }

  tbody {
    display: block;
    /* height: 100%; */
    overflow-y: auto;
  }

  tr {
    display: table;
    width: 100%;
    table-layout: fixed;
    /* background: rgba(124, 182, 230, 0.1);
    border-bottom: 5px solid rgb(6, 19, 34); */
    min-height: 30px;
  }

  th, td {
    word-wrap: break-word;
    white-space: pre-wrap;
    vertical-align: middle;
    padding: 5px 0;
  }

  ::-webkit-scrollbar {
    width: 0;
    background-color: transparent;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

这段代码首先定义了一个表格，并在JavaScript中获取了它的元素。然后，它遍历了一个示例数据数组，为每个对象创建一个表格行，并且只根据表头需要的字段（name, status, startTime, endTime, isTimeout）插入数据。这样，即使数组中的对象有多个值，表格也只会显示所需的字段。

效果图