在 MVC4 上向 DOM table 添加行

Question

我在 MVC 4 中有一个 "DOM" 列表，使用 jQuery 动态添加元素，但在删除所有元素时 table 不再允许我添加更多元素，我尝试使用长度和比较但它不起作用。

我可能遗漏了一些明显的东西，但看不到它是什么。有什么想法吗？

示例

这是我的table代码

    <div><a href="#" id="addNew"><img src="~/Images/splus.png" alt="Add Product" style="border:0"/></a></div>
        <table id="dataTable" border="0" cellpadding="0" cellspacing="0">
            <thead>
            <tr>
                <th></th>
                <th></th>
               <th>Product</th>
                <th>Quantity</th>
                <th></th>
            </tr>
                </thead>
            <tbody>
            @if (Model != null && Model.Count > 0)
            {
                int j = 0;
                int index = 1;
                foreach (var i in Model)
                {
                   <tr>
                        <td>@index</td>
                        <td>@Html.HiddenFor(a => a[j].SEQ_NO, new { id = "nrow", Value = index })</td>
                        <td>@Html.DropDownList("PRODUCTS", "Select Product")</td>
                        <td>@Html.TextBoxFor(a => a[j].QUANTITY)</td>                 
                        <td>   
                                <a href="#" id="remove" class="remove"><img src="~/Images/sminus.png" alt="Add Product" style="border:0"/></a>    
                        </td>                      
                   </tr>
                    index += 1;
                    j++;
                }
            }
         </tbody>
        </table>

这是我的jQuery代码，当我点击添加新

            $("#addNew").click(function (e) {
            e.preventDefault();
            var last = $('#dataTable>tbody>tr:last');
            if (last.length > 0) {
                var name = last.children().find('input,select')[0].name;
                var index = Number(name.replace(/[^0-9]/gi, '')) + 1;
                var tr = ('<tr>' + last.html().replace(/[0-9]+__/gi, index + '__') + '</tr>').replace(/\[[0-9]+\]+[.]/gi, '[' + index + '].');
                numberRows($('#dataTable tbody').append(tr));
             }

            });

更新：

添加"REMOVE CODE"

            $(document).on('click', '#remove', function (e) {
            e.preventDefault();
            $(this).parent().parent().remove();
            numberRows($('#dataTable tbody'));

        });

Answer 1

Am probably missing something obvious but can't see what it is. Any ideas?

var name = last.children().find('input,select')[0].name;

这行代码需要最后一个child，这意味着在您删除最后一个 under 之后，name 将是未定义的。事实上，Add New 函数甚至不会传递 if (last.length > 0)，因为当最后一个被移除时，last.length 变为 0。

你可以在devtools中调试，会看到：

在删除最后一个之前：

在删除最后一个之后：

因此，要解决此问题，最简单的解决方案是不删除最后一个，而是将其隐藏。请检查以下代码：

    $(document).on('click', '#remove', function (e) {
        e.preventDefault();
        if ($('#dataTable>tbody>tr').length > 1) {
            $(this).parent().parent().remove();
            //numberRows($('#dataTable tbody'));
        }
        else {
            $(this).parent().parent().hide();
        }
    });

Ps。不确定 numberRows() 函数中发生了什么，所以我对其进行了评论。

在 MVC4 上向 DOM table 添加行

Issue adding rows to DOM table on MVC4

c#

jquery

asp.net-mvc

visual-studio

asp.net-mvc-4