c# - 如何使用 jQuery 复制带有下拉列表的表行

Question

我有一个表格，我想在按下添加新 链接后​​复制它的最后一行。当我的行中只有 TextBoxes 时，它完全可以正常工作，但当有下拉菜单时则不会。请帮我修改jquery代码。这是表格的代码:

<div><a href="#" id="addNew">Add New</a></div>
                <table id="dataTable">
                    <tr>
                        <th>Item</th>
                        <th>Cost</th>
                        <th></th>
                    </tr>
                    @if (Model != null && Model.Count > 0)
                    {
                        int j = 0;
                        foreach (var i in Model)
                        {
                            <tr>
                                <td>@Html.DropDownListFor(a => a[j].fk_purchase_id, (SelectList)ViewBag.fk_purchase_id, null, htmlAttributes: new { @class = "form-control"})</td>
                                <td>@Html.TextBoxFor(a => a[j].cost, htmlAttributes: new { @class = "form-control" })</td>
                                <td>
                                    @if (j > 0)
                                    {
                                        <a href="#" class="remove">Remove</a>
                                    }
                                </td>
                            </tr>
                            j++;
                        }
                    }
                </table>

下面是需要改进的代码:

 <script>
        $(function () {
            //1. Add new row
            $("#addNew").click(function (e) {
                e.preventDefault();
                var $tableBody = $("#dataTable");
                var $trLast = $tableBody.find("tr:last");
                var $trNew = $trLast.clone();
                alert($trNew.html);
                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', '');
                  }
                  });

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

        });
    </script>

我试图通过将 input 更改为 select 来修改这一行，但没有帮助

var suffix = $trNew.find(':input:first').attr('name').match(/\d+/);

Answer 1

首先在你的表中添加 tbody，如:

        <table id="dataTable">
        <thead>
            <tr>
                <th>Item</th>
                <th>Cost</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            @if (Model != null && Model.Count > 0)
            {
                int j = 0;
                foreach (var i in Model)
                {
                    <tr>
                        <td>@Html.DropDownListFor(a => a[j].fk_purchase_id, (SelectList)ViewBag.fk_purchase_id, null, htmlAttributes: new { @class = "form-control"})</td>
                        <td>@Html.TextBoxFor(a => a[j].cost, htmlAttributes: new { @class = "form-control" })</td>
                        <td>
                            @if (j > 0)
                            {
                                <a href="#" class="remove">Remove</a>
                            }
                        </td>
                    </tr>
                    j++;
                }
            }
         </tbody>
        </table>

你的脚本是:

    <script>
    $(function () {
        $("#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 + '].');
                $('#dataTable tbody').append(tr);
            }
        });

    });
</script>