为什么 HTML 表的最后一个值行值会重复

Question

我有一个静态 Html 表，其中包含一个“添加”按钮，当单击该按钮时，它会创建一个新行，其中包含一些文本框 并将其追加到此表中。但我的问题是我有 3 行，当我单击“添加”时，我们可以创建新的 ROW，但上一行的值 被复制到正在生成的新行中。这是我正在使用的函数，

    $('#btn1').click(function(){
        tr= $("#Tbl tr:last").html();
        num= $('#num').val()*1;
        first= $("#Tbl tr:last").attr('id').substr(4)*1;
        last=first+num;
        for(i=first+1;i<=last;i++) {
            var newtr= tr.replace(first,i);
            $('#Tbl').append('<tr id="txt_'+i+'">'+newtr+'</tr>');
        }   
    });

当添加新行时，我如何在选择框中将值选择为“ABC”。我正在使用此语句，但没有锻炼。如何我可以将值设置为所选值吗

$('#Tbl tr:last :input').find('input[name="code"]').val('ABC'); 

Answer 1

我不是真正的 jQuery 英雄，但为什么不简单地使用这个呢？

$('#Tbl tr:last').after('<tr>...</tr>')

Answer 2

在我看来，当您

tr= $("#Tbl tr:last").html(); 

从上一行中抓取所有 html（包括该行中任何控件的值）并将其粘贴到新行中时

Answer 3

当您在文本框中键入内容时，它会设置 HTML 中的“value”属性。因此，稍后，当您复制前一行的innerHTML 时，它会采用这些“值”属性并将它们复制到新行中。

您可能希望将数据保留在脚本中并使用它来生成新行，而不是解析上一行的 HTML。

var nextId = 0;
var DEFAULT_ROW_HTML = "<tr id=\"@ID@\"><td><input type=\"text\" /></td>...</tr>";
...
$("#Tbl").append(DEFAULT_ROW_HTML.replace("@ID@", nextId));

知道我的意思吗，果冻豆？

Answer 4

试试这个：

$('#btn1').click(function(){
    $('#Tbl').each(function(){
        var $table = $(this);
        // Number of td's in the last table row
        var n = $('tr:last td', this).length;
        var tds = '<tr>';
        for(var i = 0; i < n; i++){
            tds += '<td> </td>';
        }
        tds += '</tr>';
        if($('tbody', this).length > 0){
            $('tbody', this).append(tds);
        }else {
            $(this).append(tds);
        }
    });
});

Answer 5

正如@Patrick 指出的，您可能会复制最后一行的值。那么为什么不在创建新行后清除它们呢？在 for 循环之后执行此操作：

$('#Tbl tr:last :input').val('');

这应该选择 #Tbl 表的最后一个 tr 中的输入字段并从中删除值。这将专门选择最后一行，但现在我看到您添加了可变数量的行，所以让我们正确处理它。

既然您要附加一堆行，为什么不在添加时清理它们呢？

for(i=first+1;i<=last;i++) {
    var newtr= tr.replace(first,i);
    $('#Tbl').append('<tr id="txt_'+i+'">'+newtr+'</tr>').find(':input').val('');
}

这应该处理您可以添加的尽可能多的行。