如何避免JavaScript动态创建HTML时重复生成表格行？

你遇到的核心问题是：每次点击Submit按钮时，都会创建全新的表格元素并追加到容器里，导致重复生成内容。另外你的原代码还有几处语法错误需要修正，比如未定义table变量、变量名写错（hardViolationSummary应为Violation，headerRow1应为headerRow），这些错误会导致代码无法正常运行。

下面给出三种实用的解决方法：

方法1：每次生成前清空容器（简单直接） #

每次点击按钮时，先清空容器内除了按钮之外的所有元素，再重新生成表格。这样每次点击都会得到一个全新的表格，不会有重复内容。

HTML（保持不变） #

<div id='container'>
    <button id="Submit" onclick="submit();">Submit</button>
</div>

JavaScript代码 #

const obj = {
    "Hard Violation": [
        {
            "Violation": 0,
            "Initial": "BSI",
            "Total Confirmed": 9,
        },
        {
            "Violation": 6,
            "Initial": "ASI",
            "Total Confirmed": 3,
        }
    ]
};

function submit(){
    const container = document.getElementById('container');
    const submitBtn = document.getElementById('Submit');
    
    // 清空容器，保留按钮
    container.innerHTML = '';
    container.appendChild(submitBtn);

    const violationData = obj['Hard Violation'];
    // 创建表格元素
    const table = document.createElement("table");
    
    // 生成表头
    const thead = document.createElement("thead");
    const headerRow = document.createElement("tr");
    Object.keys(violationData[0]).forEach(key => {
        const th = document.createElement("th");
        th.innerText = key;
        headerRow.appendChild(th);
    });
    thead.appendChild(headerRow);
    table.appendChild(thead);
    
    // 生成表体
    const tbody = document.createElement("tbody");
    violationData.forEach(item => {
        const row = document.createElement("tr");
        Object.values(item).forEach(value => {
            const td = document.createElement("td");
            td.innerText = value;
            row.appendChild(td);
        });
        tbody.appendChild(row);
    });
    table.appendChild(tbody);
    
    // 将表格添加到容器
    container.appendChild(table);
}

方法2：复用已有表格（更高效） #

如果不想每次都销毁重建表格，可以先检查容器里是否已经存在表格。如果存在，直接清空表体内容再重新填充；如果不存在，再创建完整的表格结构。这种方法减少了DOM操作，性能更好。

JavaScript代码 #

const obj = {
    "Hard Violation": [
        {
            "Violation": 0,
            "Initial": "BSI",
            "Total Confirmed": 9,
        },
        {
            "Violation": 6,
            "Initial": "ASI",
            "Total Confirmed": 3,
        }
    ]
};

function submit(){
    const container = document.getElementById('container');
    let table = container.querySelector('table');
    const violationData = obj['Hard Violation'];
    
    // 表格不存在时，创建表头和空表体
    if (!table) {
        table = document.createElement("table");
        // 生成表头
        const thead = document.createElement("thead");
        const headerRow = document.createElement("tr");
        Object.keys(violationData[0]).forEach(key => {
            const th = document.createElement("th");
            th.innerText = key;
            headerRow.appendChild(th);
        });
        thead.appendChild(headerRow);
        table.appendChild(thead);
        // 创建空表体
        table.appendChild(document.createElement("tbody"));
        container.appendChild(table);
    }
    
    // 清空已有表体内容
    const tbody = table.querySelector('tbody');
    tbody.innerHTML = '';
    
    // 重新填充表体数据
    violationData.forEach(item => {
        const row = document.createElement("tr");
        Object.values(item).forEach(value => {
            const td = document.createElement("td");
            td.innerText = value;
            row.appendChild(td);
        });
        tbody.appendChild(row);
    });
}

方法3：禁用按钮防止重复点击（适合耗时场景） #

如果表格数据加载是异步操作（比如从服务器获取JSON），可以点击后先禁用按钮，避免用户重复点击，等数据处理完成后再重新启用按钮。

示例代码片段 #

function submit(){
    const btn = document.getElementById('Submit');
    // 禁用按钮
    btn.disabled = true;
    
    // 这里执行表格生成逻辑（用方法1或2的代码）
    
    // 如果是异步操作，要在回调/异步完成后启用按钮；同步操作直接在最后启用
    btn.disabled = false;
}

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