点击按钮动态修改输入框ID并克隆带表单的Div

嘿，我看了你的代码和需求，你现在的问题是克隆div的时候只更新了div的ID，但里面的输入框ID和name还都是重复的对吧？这就帮你把代码调整好，保证每点击一次生成的副本里，所有标识都是唯一的👇

<html>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(document).ready(function(){
    $('#btn1').click(function(){
        // 获取页面最后一个带div前缀的容器
        var $div = $('div[id^="div"]:last');
        // 提取当前容器的数字编号，加1得到新编号
        var num = parseInt($div.prop("id").match(/\d+/g), 10) + 1;
        // 克隆容器并更新它的ID
        var $klon = $div.clone().prop('id', 'div' + num );
        
        // 更新克隆容器里的标题，让它和编号对应（比如Trace 2、Trace 3...）
        $klon.find('h4 b').text('Trace ' + num);
        
        // 遍历克隆容器里的所有输入框，更新它们的ID和name属性
        $klon.find('input').each(function(){
            var $input = $(this);
            // 替换ID里的旧数字为新编号
            var newId = $input.attr('id').replace(/\d+/, num);
            $input.attr('id', newId);
            // 同步更新name属性（后端接收数据时也需要唯一标识，避免数据覆盖）
            var newName = $input.attr('name').replace(/\d+/, num);
            $input.attr('name', newName);
        });
        
        // 把克隆好的容器插入到最后一个容器的后面
        $div.after($klon);
    });
});
</script>
<body>
<button type="button" id="btn1">Add New Trace</button>
<div id="div1">
    <h4><b>Trace 1 </b></h4>
    <form>
        <table>
            <tbody>
                <tr>
                    <td><label>X Axis: </label></td>
                    <td><input type="text" name="t1_x_axis" id="t1_x_axis" size="50"></td>
                </tr>
                <tr>
                    <td><label>Y Axis: </label></td>
                    <td><input type="text" name="t1_y_axis" id="t1_y_axis" size="50"></td>
                </tr>
            </tbody>
        </table>
    </form>
</div>
</body>
</html>

核心修改说明 #

• 标题同步更新：克隆后会把Trace 1改成对应编号的标题，比如第3个副本就是Trace 3，用户一眼就能区分不同的表单组。
• 输入框标识全更新：通过遍历输入框，用正则表达式替换掉ID和name里的旧数字，确保每个输入框的ID和name都是唯一的（比如t2_x_axis、t3_y_axis...）。
• 同步处理name属性：虽然你只提了ID，但表单提交时如果需要后端接收所有数据，重复的name会导致数据覆盖，所以一起处理了，提前避免后续踩坑。

这样点击5次按钮后，就会生成div1到div5共5个容器，每个容器里的输入框ID和name也都是唯一的，完全符合你的需求～

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