jQuery实现移除<tr>后重新追加到<tbody>的实现方案

你现有代码无法在Reset后重新追加行的核心原因是计数变量i定义在了点击事件外部，第一次执行完Add逻辑后i的值会超过设定的行数阈值，后续点击不会再触发循环追加。不需要复杂的兼容处理，以下两种写法都可以满足需求：

方案1：最小改动修复原有逻辑 #

只需要调整计数变量的作用域，把每次Add点击时的计数初始化放到事件内部即可，不需要额外克隆操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>reprex jquery</title> 
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
        // 配置每次点击Add追加的行数
        const addCount = 10; 
        $("#btn-add").click(function() {
            // 每次点击Add时都从1开始计数
            let i = 1;
            const $tbody = $("#tbl tbody");
            while (i <= addCount) {
                // 直接生成带完整属性的行，避免后续再查找元素修改属性
                const rowHtml = `
                    <tr>
                        <td><input name="s${i}" value="${i}"></td>
                        <td><textarea name="c${i}"></textarea></td>
                    </tr>
                `;
                $tbody.append(rowHtml);
                i++;
            }   
        });

        $("#btn-remove").click(function() { 
            // 直接清空tbody下所有行，不会误操作表头
            $("#tbl tbody").empty();
        });
    });
    </script>
</head>
<body>
    <div>
        <button class="btn" id="btn-add" type="button">Add</button>
        <button class="btn" id="btn-remove" type="button">Reset</button>
    </div>
    <table id="tbl">
        <thead>
            <tr>
                <th>col1</th>
                <th>col2</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>
</html>

方案2：模板克隆写法（更易维护） #

如果要用到克隆逻辑，可以提前存一个行模板，每次追加时克隆模板修改属性即可，适合行结构复杂、行内带交互事件的场景：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>reprex jquery</title> 
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
        const addCount = 10;
        // 提前定义好行模板，存为变量
        const $rowTemplate = $("<tr><td><input></td><td><textarea></textarea></td></tr>");
        
        $("#btn-add").click(function() {
            let i = 1;
            const $tbody = $("#tbl tbody");
            while (i <= addCount) {
                // 每次追加前克隆模板，传入true代表同时克隆元素绑定的事件、数据
                const $newRow = $rowTemplate.clone(true);
                $newRow.find("input").attr({"name": `s${i}`, "value": i});
                $newRow.find("textarea").attr("name", `c${i}`);
                $tbody.append($newRow);
                i++;
            }   
        });

        $("#btn-remove").click(function() { 
            $("#tbl tbody").empty();
        });
    });
    </script>
</head>
<body>
    <div>
        <button class="btn" id="btn-add" type="button">Add</button>
        <button class="btn" id="btn-remove" type="button">Reset</button>
    </div>
    <table id="tbl">
        <thead>
            <tr>
                <th>col1</th>
                <th>col2</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>
</html>

关键说明 #

• 不需要在移除元素后额外保留已删除的DOM做克隆，只要提前存好初始行模板，每次追加时重新克隆新节点即可
• 用$.empty()清空tbody比选择tr:gt(0)更可靠，不会因为索引计算错误误删表头行
• 计数变量放在点击事件内部，每次点击都会重新计数，不会出现第一次点完后续按钮失效的问题

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