1

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

我在以下位置设置了一个示例 JSFiddle：

http://jsfiddle.net/fmdataweb/vRe9v/2/

我在这里和其他网站上看到了一些关于如何执行此操作的示例，但我无法将代码合并到我现有的 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 以在创建新行的同时增加 ID，我将不胜感激。

4

2 回答 2

1

检查这个小提琴：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++;
});
于 2012-08-15T12:35:48.283 回答
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()方法，则将为 jQuery 对象中的每个元素调用一次回调，并且返回值用于设置该元素中的属性。

于 2012-08-15T12:33:34.300 回答