如何为HTML表格添加日志记录？有哪些实现方法？

{
  "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);