在 jQuery 中克隆表行并更改新行的 ID答案

【问题标题】：Clone table rows and change IDs of new rows in jQuery在 jQuery 中克隆表行并更改新行的 ID
【发布时间】：2013-07-30 17:34:25
【问题描述】：

我有一个包含以下信息的表格：

<table id="Requirements">
    <tr>
        <td>
            <select id="Id.0" name="Id.0" onChange="changeTextBox();">...
        </td>
        <td>
            <select id="Comparator.0" name="Comparator.0" onChange="changeTextBox();">...
        </td>
        <td>
            <input type="text" id="Integer.0" name="Integer.0"/>...
        </td>
        <td>
            <select id="Value.0" name="Value.0">...
        </td>
    </tr>
</table>

还有一个添加按钮。

<input type="button" id="addButton" value="Add" onClick="appendRow();"/>

我需要appendRow() 函数不仅可以克隆上一行，还需要将其 id 和名称更改为 Id.1、Id.2、Comparator.1、Comparator.2 等。因为某些下拉菜单有这么多的值，创建一个巨大的附加语句来重新创建每一行是不可行的。创建克隆时如何更改其属性？谢谢！

编辑：ID 必须为 .0、.1 格式。此表单发布到一个读取它们的 URL

编辑 2：代码

function appendRow() {
    $("QualificationRequirements").append($("QualificationRequirements tr:last").clone());
}

没有尝试更改 ID，只是一个我无法使用的简单克隆功能。

【问题讨论】：

更简单的解决方案，将这一切包装在一个唯一 ID 的容器中，丢弃所有以唯一 ID 结尾的 .0 并替换为一个通用类。现在克隆容器并增加那个 ONE ID，你就完成了。
到目前为止你有没有尝试过，显示代码？
你的html在哪里（包括表格），你的每一行都有add按钮还是什么？

标签： jquery html

【解决方案1】：

你可以试试这个 (DEMO)

HTML：

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data">
    <tr>
       <td>SelectOne</td>
       <td>Select two</td>
       <!-- More Headers -->
    </tr>
    <tr>
        <td>
            <select id="Id.0" name="Id.0">...</select>
        </td>
        <!-- More tds -->
        <td><input type="button" class="addButton" value="Add" /></td>
    </tr>
</table>

JS：

$(function(){
    $("#table-data").on('click', 'input.addButton', function() {
        var $tr = $(this).closest('tr');
        var allTrs = $tr.closest('table').find('tr');
        var lastTr = allTrs[allTrs.length-1];
        var $clone = $(lastTr).clone();
        $clone.find('td').each(function(){
            var el = $(this).find(':first-child');
            var id = el.attr('id') || null;
            if(id) {
                var i = id.substr(id.length-1);
                var prefix = id.substr(0, (id.length-1));
                el.attr('id', prefix+(+i+1));
                el.attr('name', prefix+(+i+1));
            }
        });
        $clone.find('input:text').val('');
        $tr.closest('table').append($clone);
    });

    $("#table-data").on('change', 'select', function(){
        var val = $(this).val();
        $(this).closest('tr').find('input:text').val(val);
    });
});

【讨论】：

【解决方案2】：

试试这个：

function addTableRow(table) { 
     var $tr = $(table).find('tr:last').clone(); 
     $tr.find('input').attr('id', function(){ 
          var parts = this.id.match(/(\D+)(\d+)$/); 
          return parts[1] + ++parts[2]; 
     }); 
     $(table).append($tr); 
     return true; 
};

【讨论】：