使用Javascript向html表动态添加行

作为一名初学MVC的程序员，我经常在网上寻找帮助。我正在尝试使用javascript向HTML表动态添加一行。下面的代码非常有效，它添加了行。问题是当我返回控制器时，新行不在那里。如果我从3行数据开始并添加1或2行，当我单击submit按钮时，它只返回原始的3条记录。不知道为什么下面的代码没有返回我添加的新行。下面是代码的简化部分

任何帮助都将不胜感激

这是我的看法。

@型号列表
}
@节脚本{
@Scripts.Render（“~/bundles/jqueryval”）
}
$（'.phone2'）.mask（'999-999-9999'）；
$（“.phone”）.mask（“？999-999-9999”）；
$（文档）.ready（函数（）{
var计数=0；
$（'.add按钮'）。单击（函数（）{
计数++；
变量模板=$（'.contacts记录模板'）。克隆（）
template.find（'input[type=text]'）.val（null）；
template.find（'input[type=checkbox'））.prop（'checked'，false）；
$.each（template.find（'input[type=text]）、函数（）{
var name=$（this.attr（'name'）；
name=name.replace（'0'，计数-1）；
$（this.attr（'name'，name）；
});
$（'.list Contacts'）。追加（模板）；
template.removeClass（'contacts-record-template'）.addClass（'contacts-record'）.show（）；
})
});

---

控制器。

[HttpPost]
[ValidateAntiForgeryToken]
公共操作结果编辑（字符串提交，列出实体\联系人）
{
if（ModelState.IsValid）
{
foreach（实体_联系人中的var i）
{
ViewBag.temp=i.LASTNAME；
}
db.SaveChanges（）；
}
返回视图（实体\联系人）；

您的javascript运行在文档就绪状态

请尝试：

<input type="button" class="add-button" name="add" value="Add" />

---

我希望它能工作。

问题是，模板输入字段的名称类似于

[1]。LASTNAME

。但在代码中，您正在对

0

进行替换，而不是

1

尝试为动态生成的输入字段生成名称值时，请将代码更改为替换

1

，而不是

0

下面的代码应该可以正常工作

$(document).ready(function () {

    $('.add-button').click(function() {

        var count = $("tr.contacts-record").length;
        var template = $('.contacts-record-template').clone();
        template.find('input[type=text]').val(null);
        template.find('input[type=checkbox]').prop('checked', false);
        $.each(template.find('input[type=text]'), function() {
            var name = $(this).attr('name');             
            name = name.replace('1', count);             
            $(this).attr('name', name);
        });

        $('.list-Contacts').append(template);
        template.removeClass('contacts-record-template')
                                           .addClass('contacts-record').show();
    });
});

---

虽然Shyju的回答可能解决了一个问题，但您还有多个其他问题会导致绑定失败。您的“模板”带有表单标记，因此它将回发其值，这些值是第二行的初始值，并且您在第二行中所做的任何编辑都将被忽略。如果没有显著的更改，则无法实现“删除”行功能xtra javascript代码。您的脚本引用了一个不存在的

输入[type=checkbox]

，但如果它这样做了，它将失败，因为您没有重命名索引器（至少还有3个其他索引器）。我建议您查看答案并了解正确的实现方法。感谢您的上述说明，您是对的，我在创建不需要的行时遇到问题。您在上面声明“模板位于表单标记内，因此它将回发其初始值”。模板应该存储在哪里？在表外？在局部视图中？尝试了一些方法，但仍然无法正常工作。当我将模板放置在表单标记外时，我的java脚本无法识别模板。如何引用表单标记外的模板？再次感谢您的帮助。

<input type="button" class="add-button" name="add" value="Add" />

<button type="button" class="add-button" onclick="doIt();" name="add">Add</button>

function doIt() {
        var count = 0;
            count++;
            var template = $('.contacts-record-template').clone()
            template.find('input[type=text]').val(null);
            template.find('input[type=checkbox]').prop('checked', false);
            $.each(template.find('input[type=text]'), function () {
                var name = $(this).attr('name');
                name = name.replace('0', count - 1);
                $(this).attr('name', name);
            });

            $('.list-Contacts').append(template);
            template.removeClass('contacts-record-template').addClass('contacts-record').show();
    }

$(document).ready(function () {

    $('.add-button').click(function() {

        var count = $("tr.contacts-record").length;
        var template = $('.contacts-record-template').clone();
        template.find('input[type=text]').val(null);
        template.find('input[type=checkbox]').prop('checked', false);
        $.each(template.find('input[type=text]'), function() {
            var name = $(this).attr('name');             
            name = name.replace('1', count);             
            $(this).attr('name', name);
        });

        $('.list-Contacts').append(template);
        template.removeClass('contacts-record-template')
                                           .addClass('contacts-record').show();
    });
});