在JavaScript中将具有多列的动态表添加到数组

Question

我有一个基本视图，其中包含一个动态表，该表允许添加和删除行。它由一个称为任务的字段和一个称为序列的字段组成。我正在使用javascript获取这些值并将其发布到计划将Ajax传递给控制器​​的数组。当我在Chrome中运行代码时，这些值又变回空白。我尝试了在此站点上找到的各种方法，但未能找到答案。有人可以看到我做错了什么，还是可以向我指出正确的方向。

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>IT ICNDB - Create New Forms</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })


    <div class="row">
        @Html.LabelFor(model => model.FormName, htmlAttributes: new { @class = "col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.FormName, new { htmlAttributes = new { @class = "form-control", style = "width: 30%", id ="FormName" } })
            @Html.ValidationMessageFor(model => model.FormName, "", new { @class = "text-danger" })
        </div>
    </div>

    <br/>

    <div class="row">
        @Html.LabelFor(model => model.eSignReq, htmlAttributes: new { @class = "col-md-2" })
        <div class="col-md-10">
            <div class="checkbox">
                @Html.EditorFor(model => model.eSignReq, new {id = "eSignReq" })
                @Html.ValidationMessageFor(model => model.eSignReq, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

    <div class="row">
        @Html.LabelFor(model => model.DirectorEsign, htmlAttributes: new { @class = "col-md-2" })
        <div class="col-md-10">
            <div class="checkbox">
                @Html.EditorFor(model => model.DirectorEsign, new {id ="dirEsign"})
                @Html.ValidationMessageFor(model => model.DirectorEsign, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

    <br />

    <table id="Tasks">
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Task)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.TaskSeq)
                </th>
                <th></th>
            </tr>
        </thead>
        <tbody>              
        <tr>
                <td>
                    @Html.TextBox("Task")
                </td>
                <td>
                    @Html.TextBox("Sequence")
                </td>
                <td>
                    <input type="button" class="BtnPlus" value="+"/>
                </td>
                <td>
                    <input type="button" , class="BtnMinus" value="-"/>
                </td>
            </tr>
        </tbody>
    </table>

    <br/>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create Form" class="button" id="SaveButton"/>
        </div>
    </div>
</div>
}


@section Scripts{
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/Scripts/jquery-ui-1.12.1.js")

<script type="text/javascript">
    $(document).ready(function() {
        function addRow() {
            var html = '<tr>' +
                '<td> @Html.TextBox("Task",null) </td>' +
                '<td> @Html.TextBox("Sequence", null)</td>' +
                '<td> <input type="button" class="BtnPlus" value="+" /> </td>' +
                '<td> <input type="button" , class="BtnMinus" value="-" /> </td>' +
                '</tr>';
            $(html).appendTo($("tbody"));
        };


        function deleteRow() {
            var par = $(this).closest('tr');
            par.remove();
        };

        $("#SaveButton").click(function () {

            var data = Array();

            for (var i = 0; i < $('#Tasks').find("tr").length; i++) {
                data[i] = Array();
               var currentRow = $('#Tasks').find("tr").eq(i);

                for (j = 0; j < currentRow.find('td').length; j++) {
                   data[i][j] = currentRow.find('td').eq(j).val();
                };
            };
            alert(data);

            });

        $("tbody").on("click", ".BtnMinus", deleteRow);
        $("tbody").on("click", ".BtnPlus", addRow);
    });
</script>
}