ASP.NET MVC实现下拉框表格tbody克隆：清除数据并递增ID

我来帮你搞定这个问题！你现在已经实现了tbody的克隆，但需要调整两个核心点：克隆时清空表单数据和让所有元素ID自动递增。咱们结合你的场景一步步修改代码：

先假设你的基础HTML结构（如果和实际有出入，你可以对应调整选择器） #

<table id="targetTable">
    <thead>
        <tr>
            <th>下拉选项</th>
            <th>文本输入</th>
            <th>其他控件</th>
        </tr>
    </thead>
    <!-- 初始tbody，ID带数字后缀方便递增 -->
    <tbody id="tbody-1">
        <tr>
            <td>
                <select id="dropdown-1" name="dropdown-1">
                    <option value="">请选择</option>
                    <option value="1">选项A</option>
                    <option value="2">选项B</option>
                </select>
            </td>
            <td><input type="text" id="input-1" name="input-1" /></td>
            <td><input type="checkbox" id="chk-1" name="chk-1" /></td>
        </tr>
    </tbody>
</table>

<button id="cloneTbodyBtn">克隆tbody</button>

修改后的jQuery代码（核心逻辑） #

$('#cloneTbodyBtn').click(function() {
    // 1. 获取最后一个tbody，计算新的编号
    var $lastTbody = $('#targetTable tbody:last');
    var currentIdNum = parseInt($lastTbody.attr('id').split('-')[1]);
    var newIdNum = currentIdNum + 1;

    // 2. 克隆tbody，注意用clone(true)可以保留事件绑定（如果需要的话），不需要就用clone()
    var $cloneTbody = $lastTbody.clone(true);

    // 3. 清空克隆后的所有表单数据
    $cloneTbody.find('input, select, textarea').each(function() {
        var $elem = $(this);
        switch($elem.prop('type')) {
            case 'text':
            case 'password':
            case 'textarea':
                $elem.val('');
                break;
            case 'checkbox':
            case 'radio':
                $elem.prop('checked', false);
                break;
            case 'select-one':
                $elem.prop('selectedIndex', 0); // 选回第一个默认选项
                break;
        }
    });

    // 4. 替换克隆tbody及内部所有元素的ID（匹配数字后缀）
    $cloneTbody.attr('id', 'tbody-' + newIdNum);
    $cloneTbody.find('[id]').each(function() {
        var oldId = $(this).attr('id');
        // 替换ID里的数字部分，比如把dropdown-1改成dropdown-2
        var newId = oldId.replace(/(\d+)$/, newIdNum);
        $(this).attr('id', newId);
        // 同时更新name属性（如果需要提交表单的话，确保name也对应递增）
        $(this).attr('name', newId);
    });

    // 5. 把克隆后的tbody追加到表格里
    $('#targetTable').append($cloneTbody);
});

关键逻辑说明 #

1. ID递增计算：通过最后一个tbody的ID提取数字，加1得到新编号，这样就算中间删除过tbody，编号也能连续（避免用长度计数导致的断层）。
2. 清空表单数据：遍历所有表单控件，根据控件类型做对应清空操作——文本框清空值、复选框取消勾选、下拉框选回默认选项。
3. ID批量替换：用正则表达式匹配ID末尾的数字，替换成新编号，同时同步更新name属性（如果你的表单需要提交到后端，这个很重要，不然模型绑定会出问题）。

如果你的ASP.NET MVC是用HtmlHelper生成的控件（比如@Html.DropDownListFor(m => m.Items[0].Value, Model.Options)），生成的ID可能是Items_0__Value这种格式，那你只需要把正则表达式改成replace(/(\d+)/, newIdNum)（匹配中间的数字），或者根据实际ID格式调整替换规则就行。

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