如何在jQuery循环追加内容前清空表格HTML？代码问题求助

你的代码里有两个核心问题：重复绑定点击事件和行列生成逻辑拆分导致的结构混乱，这才会出现点击提交时表格被持续清空或者内容异常的情况。我来帮你梳理下修正思路：

问题分析 #

1. 你在draw函数的两个for循环里，分别多次绑定了#submit的点击事件——循环height次就绑定height次点击回调，循环width次又绑定width次，导致点击按钮时这些回调会重复执行，要么疯狂追加内容，要么重复清空。
2. 你把行和列的生成拆成了两个独立的循环，这会导致每点击一次，先追加height行，再给所有行都追加width列，完全不符合“生成width列height行的表格”的预期。

修正后的代码方案 #

我们需要把点击事件的绑定逻辑统一，并且在点击时先清空表格，再一次性生成完整的行列结构：

function setupTable(width, height) {
    // 先移除之前绑定的点击事件，避免重复触发
    $("#submit").off('click').on('click', function() {
        // 第一步：清空表格现有内容
        $("table").empty();
        
        // 第二步：生成完整的表格结构
        // 先创建tbody（规范表格结构）
        const tbody = $("<tbody></tbody>");
        for(let i = 0; i < height; i++){
            // 创建一行
            const row = $("<tr></tr>");
            // 给当前行添加对应数量的单元格
            for(let j = 0; j < width; j++){
                row.append("<td></td>");
            }
            // 把行添加到tbody
            tbody.append(row);
        }
        // 把tbody添加到表格
        $("table").append(tbody);
    });
}

// 调用示例：生成5列3行的表格
setupTable(5, 3);

关键说明 #

• 使用off('click')解绑之前的点击事件：确保每次调用setupTable时，不会累积绑定多个点击回调，避免重复执行。
• 点击时先执行empty()：清空表格所有现有内容，这样每次生成的都是全新的表格，不会和旧内容叠加。
• 嵌套循环生成行列：外层循环生成行，内层循环给每行生成对应数量的列，这样结构更清晰，也符合HTML表格的规范。

这样修改后，点击提交按钮时就会正确清空旧表格，生成你需要的指定大小的新表格啦。

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