{ "timestamp": "2023-10-27T10:30:00Z", "userId": "user123", "tableId": "product_list", "actionType": "edit_cell", "rowIndex": 5, "columnId": "price", "oldValue": "19.99", "newValue": "24.50"}
{ "timestamp": "2023-10-27T14:55:30.789Z", "userId": "john.doe", "tableId": "order_details", "actionType": "cell_edit", "rowIndex": 3, "rowId": "order_abc123", "columnName": "quantity", "oldValue": 5, "newValue": 7, "details": { "ipAddress": "192.168.1.100", "browser": "Chrome 118" }}
// 简单的前端日志发送示例function sendLogToServer(logData) { fetch('/api/table-logs', { method: 'POST', headers: { 'Content-Type': 'application/json', // 'Authorization': 'Bearer YOUR_TOKEN' // 如果需要认证 }, body: JSON.stringify(logData) }) .then(response => { if (!response.ok) { console.error('Failed to send log:', response.statusText); // 可以在这里实现重试机制或客户端Fallback } }) .catch(error => { console.error('Error sending log:', error); // 网络错误等，同样可以考虑重试或Fallback });}// 假设有一个可编辑的表格document.getElementById('myDataTable').addEventListener('blur', function(event) { const target = event.target; // 确保是可编辑的单元格或其内的input if (target.matches('td[contenteditable="true"]') || target.matches('td input, td textarea')) { const row = target.closest('tr'); const table = target.closest('table'); // 假设我们能获取旧值（可能在focus时保存） const oldValue = target.dataset.oldValue || ''; const newValue = target.innerText || target.value; if (oldValue !== newValue) { // 只有值发生变化才记录 const logEntry = { timestamp: new Date().toISOString(), userId: 'someUser123', // 从用户会话中获取 tableId: table ? table.id : 'unknown_table', actionType: 'cell_edit', rowIndex: row ? row.rowIndex : -1, columnName: target.dataset.columnName || 'unknown_column', // 使用data-属性标识列 oldValue: oldValue, newValue: newValue }; sendLogToServer(logEntry); } // 清除旧值，或在focus时设置新的oldValue target.dataset.oldValue = newValue; }}, true); // 使用捕获阶段，确保事件能被表格容器捕获// 在单元格获得焦点时保存旧值document.getElementById('myDataTable').addEventListener('focus', function(event) { const target = event.target; if (target.matches('td[contenteditable="true"]') || target.matches('td input, td textarea')) { target.dataset.oldValue = target.innerText || target.value; }}, true);
以上就是如何为HTML表格添加日志记录？有哪些实现方法？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1567110.html
微信扫一扫 
支付宝扫一扫 
