基于Socket.IO实现HTML表格实时追加数据的问题求助

问题根源 #

你的toTable函数每次调用都会重置整个表格的HTML内容（先设置表头，再添加新行），导致旧数据被完全覆盖。要实现历史数据保留，只需修改为只追加新行，而非重置整个表格。

修正后的代码 #

HTML部分（无需修改）

<div class="row"> 
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Invoice List</h4>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="results">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript部分（核心修改）

<script type="text/javascript">
$(document).ready(function(){
    // 初始化表格表头（仅执行一次）
    function initTableHeader() {
        const table = document.getElementById('results');
        // 仅当表格为空时添加表头
        if (table.innerHTML === '') {
            table.innerHTML = '<tr><th>First Name</th><th>Last Name</th><th>Email</th><th>Phone</th></tr>';
        }
    }

    // 追加新数据行到表格
    function appendToTable(data) {
        const table = document.getElementById('results');
        // 创建新行HTML
        const newRow = `
            <tr>
                <td>${data.firstname}</td>
                <td>${data.lastName.toUpperCase()}</td>
                <td>${data.email}</td>
                <td>${data.phone}</td>
            </tr>
        `;
        // 追加到表格末尾，不覆盖原有内容
        table.innerHTML += newRow;
    }

    // 初始化表头
    initTableHeader();

    var socket = io('http://localhost:5001');
    
    socket.on('getinvoices', (data) => {
        console.log(data);
        // 调用追加函数，而非重置表格
        appendToTable(data.doc);
    });
});
</script>

关键修改点 #

1. 拆分函数职责：将表头初始化和数据追加分开，表头仅在页面加载时创建一次。
2. 避免重置innerHTML：使用innerHTML +=仅追加新行，而非覆盖整个表格内容。
3. 数据字段匹配：将原表头的COIN/EXCHANGE等改为和实际JSON数据对应的字段（如First Name、Last Name），避免展示内容不匹配。

额外优化建议 #

可以使用document.createElement和appendChild来操作DOM，比直接拼接HTML更安全（防止XSS风险），示例：

function appendToTable(data) {
    const table = document.getElementById('results');
    const row = document.createElement('tr');
    row.innerHTML = `
        <td>${data.firstname}</td>
        <td>${data.lastName.toUpperCase()}</td>
        <td>${data.email}</td>
        <td>${data.phone}</td>
    `;
    table.appendChild(row);
}

内容的提问来源于stack exchange，提问作者hus forex