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

【问题标题】：why the last Value Row values are repeated for the HTML Table为什么 HTML 表的最后一个值行值重复
【发布时间】：2010-11-16 05:57:56
【问题描述】：

我有一个静态 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');

【问题讨论】：

标签： jquery jquery-ui jquery-selectors

【解决方案1】：

正如@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('');
}

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

【讨论】：

@Surreal:说如果我向表中添加 10 行而不是仅清空最后一行输入值，其余 9 行似乎相同
没错——我写它只是为了这样做。现在我再次查看您的代码，我看到您正在添加 num 行。我想我可以解决这个问题。
好的，试一试 - 添加行时清除输入。也简单得多。
@SurealDreams：这也适用于选择元素
@Someone：是的 - 它会清除文本、文本区域并选择输入。

【解决方案2】：

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

$('#Tbl tr:last').after('&lt;tr&gt;...&lt;/tr&gt;')

【讨论】：

【解决方案3】：

在我看来，当你这样做时

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

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

【讨论】：

【解决方案4】：

当您在文本框中输入内容时，它会在 HTML 中设置“值”属性。因此，稍后，当您复制上一行的 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));

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

【讨论】：

【解决方案5】：

试试这个：

$('#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);
        }
    });
});

【讨论】：