使用追加复制表行 - 想要创建唯一 ID答案

【问题标题】：Using Append to Copy Table Row - Would like to Create Unique Ids使用追加复制表行 - 想要创建唯一 ID
【发布时间】：2010-08-17 14:07:26
【问题描述】：

我有一个表单，其中包含一个表格，其中包含供用户填写的项目在。我目前已经设置好，以便用户可以添加一个额外的行以防他们需要添加更多信息。

这很好用，但我想知道是否有办法生成每个克隆字段的唯一 ID。

My function is currently this:

 function addTableRow(table) {
         $(table).append($(table + ' tr:last').clone());
         return true;
   }

并通过传入表 id 的 onclick 调用。

表格行包含以下信息：

<tr>
     <td><input type="text" id="txtBarnParts1" name="txtBarnParts
 []"></td>
     <td><input type="text" id="txtBarnWidth1" name="txtBarnWidth
 []">ft</td>
     <td><input type="text" id="txtBarnRemarks1"
 name="txtBarnRemarks1[]"></td>
</tr>

我想要的是当我克隆 id 的行时以 1 递增，因此下一行将具有 id：

txtBarnParts2, txtBarnWidth2, txtBarnRemarks2...等等。

有没有办法做到这一点？

谢谢！

【问题讨论】：

标签： jquery

【解决方案1】：

var $newTr = $(table + ' tr:last').clone();
var newIndex = $newTr.index() + 1;
$newTr.find('[id]').each(function () {
    this.id = this.id.replace(/[0-9]+$/e, newIndex);
});
$(table).append($newTr);

【讨论】：

【解决方案2】：

试试这个。需要 jQuery 1.4 或更高版本。

根据您的使用情况，我假设 table 存储带有哈希的 ID，如 "#myTable"。

function addTableRow(table) {
   var $last = $(table + ' tr:last');
   var num = $last.index() + 1; // If the IDs in each row are indexed starting
                                //    with 1, then you would need "+ 2" instead
   $last.clone().find(':input[id]')
         .attr('id', function(i,current) { 
                         return current.replace(/\d+$/, num);
                    })
         .end().appendTo(table);
   return true;
}

这会在新的（克隆的）行上执行.find()，搜索具有 ID 属性的 input 元素。然后它将一个函数传递给.attr() 方法，该方法将当前结束数字替换为新数字。

编辑：.attr() 呼叫中缺少逗号。固定。

编辑： .clone() 放错地方了。固定。

【讨论】：

@user - 你的意思是像一个 jsFiddle 的例子？请稍等。
@user - 抱歉，我出错了。我在错误的位置有.clone()。固定的。这是一个例子。添加一行时，它会弹出 HTML，以便您查看 ID。 jsfiddle.net/gWAbk
tnx.for 快速回复..但我希望行数也附加输入。有什么想法吗？
@user - 你的意思是你想用数字设置输入的值？简单的。只需将this.value = num; 添加到.attr() 中的函数即可。如果要将其附加到当前值，请执行此操作 this.value = this.value + num; jsfiddle.net/gWAbk/1

【解决方案3】：

var i = 1
function addTableRow() {
         $("table").append($("table tr:last").clone());
         $("table tr:last input").attr("name", $("table tr:first input").attr("name")+i);
         i++;
   })

这适用于名称。类似的也适用于 id。

【讨论】：

giker - 这不会删除旧号码，因此对于txtBarnParts1 ID，下一个将是txtBarnParts12，然后是txtBarnParts123，依此类推。 :o)
你只需要在第一行没有数字。
@giker - 但是您正在克隆 :last 行，这意味着您正在引用附加的前一行，该行具有更新的 ID。您可以将 :last 更改为 :first，但它假定 OP 想要一个没有数字的行。
我不想要新克隆行中的数据。有什么想法吗？
jsfiddle.net/up72J 我是最后一个克隆，但是对于索引，我使用的第一行没有数字 + 计数器

【解决方案4】：

这是通用函数

    var indexCloneTableLastRowSelect = 1;
    var indexCloneTableLastRowInput = 1;
    var forEachElementItrateOnce = 1;
function cloneTableLastRow_(tableID_) {


    tableID_ = '#' + tableID_;
    // copy|clone last row 
    $(tableID_).append($(tableID_ + " tr:last").clone());
    $(tableID_ + " tr:last").each(function (){

        $(tableID_ + " tr:last select").attr("name", function() {
            if (forEachElementItrateOnce == 1){
                indexCloneTableLastRowSelect++;
            }            
            this.name = this.name.replace(/[0-9]+$/, indexCloneTableLastRowSelect);
            this.id = this.id.replace(/[0-9]+$/, indexCloneTableLastRowSelect);
            forEachElementItrateOnce = 0;
        })
        $(tableID_ + " tr:last input").attr("name", function() {
            if (forEachElementItrateOnce == 1){
                indexCloneTableLastRowInput++;
            }
            this.name = this.name.replace(/[0-9]+$/, indexCloneTableLastRowInput);
            this.id = this.id.replace(/[0-9]+$/, indexCloneTableLastRowInput);
            forEachElementItrateOnce = 0;
        })

    })
    forEachElementItrateOnce = 1;
}

【讨论】：