<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table Update Example</title>
</head>
<body>
<table id="data-table">
<thead>
<tr>
<th>时间</th><th> 姓名</th> <th> 时段 </th><th> 上线时间 </th><th> 是否排班 </th><th> 工作状态 </th><th> 全天在线时长</th> <th> 全天背单时长 </th><th> 全天完单量 </th><th> 时段内在线时长 </th><th> 时段内背单时长 </th><th>
</tr>
</thead>
<tbody>
<!-- 动态生成的数据行 -->
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.js"></script>
<script>
// client.js
const socket = io();
// 监听 'update_table' 事件
socket.on('update_table', function(data) {
const tableBody = document.getElementById('data-table').getElementsByTagName('tbody')[0];
// 获取当前时间
const now = new Date();
const timeString = now.toLocaleString(); // 或者使用其他格式化方式
// 生成新的行，并为每行添加当前时间
data['未及格成员'].forEach(function(rowData) {
const row = tableBody.insertRow();
// 添加时间列
const timeCell = row.insertCell(0); // 插入到第一列
timeCell.textContent = timeString;
// 添加其他数据列
rowData.forEach(function(cellData) {
const cell = row.insertCell();
cell.textContent = cellData;
});
})
});
// 连接事件
socket.on('connect', function() {
console.log('Connected to server');
});
</script>
</body>
</html>