Javascript 使用jQuery复制表中的行仅适用于前3列。并且删除功能不起作用

我有一个表，我想在按下[Add New]链接后克隆表的最后一行。该表有8列。当我按下[Add New]链接时，只有前3列的值与上面的值相同。删除功能也无法删除行

这是加载时的页面

现在，我输入PX、日期和地点的值：

然后，当我点击[Add New]链接时，新行出现在下面。但只填充了3列：

我希望下一行完全克隆上一行的值

以下是表格的代码：

<div style="width:700px; padding:5px; background-color:white;">
@using (Html.BeginForm("PxDataEntry", "PxAndTitle", FormMethod.Post))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    if (ViewBag.Message != null)
    {
        <div style="border:solid 1px green">
            @ViewBag.Message
        </div>
    }

    <div><a href="#" id="addNew">+ Add New</a></div>
    <table id="dataTable" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <th>PX</th>
            <th>Date</th>
            <th>Place</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        @if (Model != null && Model.Count > 0)
        {
            int j = 0;
            foreach (var i in Model)
            {
                <tr style="border:1px solid black">
                    <td>@Html.TextBoxFor(a => a[j].px)</td>
                    <td>@Html.TextBoxFor(a => a[j].sDate)</td>
                    <td>@Html.TextBoxFor(a => a[j].Place)</td>
                    <td>@Html.TextBoxFor(a => a[j].PId)</td>
                    <td>@Html.TextBoxFor(a => a[j].FId)</td>
                    <td>@Html.TextBoxFor(a => a[j].createdBy)</td>
                    <td>@Html.TextBoxFor(a => a[j].createdAt)</td>
                    <td>@Html.TextBoxFor(a => a[j].PxStatus)</td>
                    <td>
                        @if (j > 0)
                        {
                            <a href="#" class="remove">Remove</a>
                        }
                    </td>
                </tr>
                j++;
            }
        }
    </table>
    <input type="submit" value="Save Bulk Data" />
}

@使用（Html.BeginForm（“PxDataEntry”、“PxAndTitle”、FormMethod.Post））
{
@Html.AntiForgeryToken（）
@Html.ValidationSummary（true）
如果（ViewBag.Message！=null）
{
@查看包。留言
}
军中福利社
日期
放置
@if（Model！=null&&Model.Count>0）
{
int j=0；
foreach（模型中的var i）
{
@Html.TextBoxFor（a=>a[j].px）
@Html.TextBoxFor（a=>a[j].sDate）
@Html.TextBoxFor（a=>a[j].Place）
@Html.TextBoxFor（a=>a[j].PId）
@Html.TextBoxFor（a=>a[j].FId）
@Html.TextBoxFor（a=>a[j].createdBy）
@Html.TextBoxFor（a=>a[j].createdAt）
@Html.TextBoxFor（a=>a[j].PxStatus）
@如果（j>0）
{
}
j++；
}
}
}

以下是脚本：

@section Scripts{
@Scripts.Render("~/bundles/jqueryval")
<script language="javascript">
    $(document).ready(function () {

        //1. Add new row
        $("#addNew").click(function (e) {
            e.preventDefault();
            var $tableBody = $("#dataTable");
            var $trLast = $tableBody.find("tr:last");
            var $trNew = $trLast.clone();

            var suffix = $trNew.find(':input:first').attr('name').match(/\d+/);
            $trNew.find("td:last").html('<a href="#" class="remove">Remove</a>');
            $.each($trNew.find(':input'), function (i, val) {
                // Replaced Name
                var oldN = $(this).attr('name');
                var newN = oldN.replace('[' + suffix + ']', '[' + (parseInt(suffix) + 1) + ']');
                $(this).attr('name', newN);
                //Replaced value
                var type = $(this).attr('type');
                if (type.toLowerCase() == "text") {
                    $(this).attr('value', '');
                }

                // If you have another Type then replace with default value
                $(this).removeClass("input-validation-error");

            });
            $trLast.after($trNew);

            // Re-assign Validation
            var form = $("form")
                .removeData("validator")
                .removeData("unobtrusiveValidation");
            $.validator.unobtrusive.parse(form);
        });

        // 2. Remove
        $('a.remove').live("click", function (e) {
            e.preventDefault();
            $(this).parent().parent().remove();
        });

    });
</script>

@节脚本{
@Scripts.Render（“~/bundles/jqueryval”）
$（文档）.ready（函数（）{
//1.添加新行
$（“#添加新”）。单击（函数（e）{
e、 预防默认值（）；
var$tableBody=$（“#数据表”）；
var$trLast=$tableBody.find（“tr:last”）；
var$trNew=$trLast.clone（）；
变量后缀=$trNew.find（':input:first'）.attr（'name'）.match（/\d+/）；
$trNew.find（“td:last”）.html（“”）；
$.each（$trNew.find（':input'），函数（i，val）{
//更名
var oldN=$（this.attr（'name'）；
var newN=oldN.replace（'['+后缀+']'，'['+（parseInt（后缀）+1）+']'）；
$（this.attr（'name'，newN））；
//替换值
var type=$（this.attr（'type'）；
if（type.toLowerCase（）=“text”）{
$（this.attr（'value'，''）；
}
//如果有其他类型，则替换为默认值
$（this）.removeClass（“输入验证错误”）；
});
$trLast.after（$trNew）；
//重新分配验证
变量形式=$（“形式”）
.removeData（“验证器”）
.removeData（“不引人注目的验证”）；
$.validator.unobtrusive.parse（表单）；
});
//2.移除
$（'a.remove'）.live（“单击”），函数（e）{
e、 预防默认值（）；
$（this.parent（）.parent（）.remove（）；
});
});

---

}

第一个问题是因为您清空了克隆的输入值，即：

$（this）.attr（'value'，''）trs

中的值，则code>删除这一行。然后，单击

a

标记，您只需使用

.closest（“tr”）

从表中删除整个

tr

演示代码：

$（文档）.ready（函数（）{
//1.添加新行
$（“#添加新”）。单击（函数（e）{
e、 预防默认值（）；
var$tableBody=$（“#数据表”）；
var$trLast=$tableBody.find（“tr:last”）；
var$trNew=$trLast.clone（）；
变量后缀=$trNew.find（':input:first'）.attr（'name'）.match（/\d+/）；
$trNew.find（“td:last”）.html（“”）；
$.each（$trNew.find（':input'），函数（i，val）{
//更名
var oldN=$（this.attr（'name'）；
var newN=oldN.replace（'['+后缀+']'，'['+（parseInt（后缀）+1）+']'）；
$（this.attr（'name'，newN））；
//替换值
var type=$（this.attr（'type'）；
if（type.toLowerCase（）=“text”）{
//该行输入的值为空
//$（this.attr（'value'，''）；
}
//如果有其他类型，则替换为默认值
$（this）.removeClass（“输入验证错误”）；
});
$trLast.after（$trNew）；
})
$（文档）。在（“单击”、“a.remove”上，函数（e）{
e、 预防默认值（）；
$（this）.closest（“tr”）.remove（）；//删除最近的tr
});
});

军中福利社
日期
放置
是否仅添加三列？请详细说明？