使用 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" />
}

脚本如下：

@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>

}

解决方法

第一个问题是因为您清空了克隆的输入值，即：$(this).attr('value',''); 如果您还需要来自之前 trs 的值，请删除此行。然后，点击 a 标签您可以简单地使用 .closest("tr") 从表中删除整个 tr。

演示代码：

$(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 line empty value of inputs 
        // $(this).attr('value','');
      }

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

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

  $(document).on("click","a.remove",function(e) {
    e.preventDefault();
    $(this).closest("tr").remove(); //remove closest trs
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table id="dataTable" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <th>PX</th>
    <th>Date</th>
    <th>Place</th>
    <th></th>
    <th></th>
  </tr>

  <tr style="border:1px solid black">
    <td><input type="text" name="a[0]"></td>
    <td><input type="text" name="sDate[0]"></td>
    <td><input type="text" name="Place[0]" value="somthing"></td>
    <td><input type="text" name="Pid[0]" value="1"></td>
    <td>

      <a href="#" class="remove">Remove</a>

    </td>
  </tr>


</table>
<button id="addNew">Add</button>