Question

我有一张表格，其中包含一行最初的1行输入字段。用户可以单击“新建行”按钮以获取另一行，其中包含空输入字段。这一切都运行良好但我需要同时增加新行的ID号。

我在：

设置了一个示例JSFiddle

我在这里以及其他网站上看到了一些关于如何执行此操作的示例，但我无法将代码合并到现有的Javascript中而不会破坏它。这是Javascript：

var table = $( '#nextYear' )[0];

$( table ).delegate( '#button2', 'click', function () {

var thisRow = $( this ).closest( 'tr' )[0];
$( thisRow ).clone().insertAfter( thisRow ).find( 'input:text' ).val( '' );
$(this).remove();
});

真的很感激，如果有人可以告诉我如何扩展现有的Javascript以在创建新Row的同时增加ID。

Answer 1

var table = $( '#nextYear' )[0],
    nextId = 2;

$( table ).delegate( '#button2', 'click', function () {

    var thisRow = $( this ).closest( 'tr' )[0];
    $(thisRow).clone().insertAfter(thisRow).find('input:text').val('')
         .attr('id',function(i,oldVal){ return oldVal.replace(/\d+/,nextId); });
    $(this).remove();
    nextId++;
});

作为解释，如果使用回调函数调用.attr() method，则将为jQuery对象中的每个元素调用一次回调，并使用返回值设置该元素中的属性。

Answer 2

检查这个小提琴：http://jsfiddle.net/2Ds4J/1/

添加了一些代码来增加所有输入的ID，并在将其插入DOM之前在克隆的行中进行选择。

var newIDSuffix = 2;
$( table ).delegate( '#button2', 'click', function () {
    var thisRow = $( this ).closest( 'tr' )[0];

    var cloned = $( thisRow ).clone();
    cloned.find('input, select').each(function() {
         var id = $(this).attr('id');
         id = id.substring(0, id.length-1) + newIDSuffix;
         $(this).attr('id', id);
    });

    cloned.insertAfter( thisRow ).find( 'input:text' ).val( '' );

    newIDSuffix++;
});

插入新表行时增加输入ID

2 个答案: