在 ASP.NET Core MVC 中使用 jQuery 动态生成 HTML 控件并更改 ID 属性答案

【问题标题】：Dynamically generate HTML control and change the ID attribute with jQuery in ASP.NET Core MVC在 ASP.NET Core MVC 中使用 jQuery 动态生成 HTML 控件并更改 ID 属性
【发布时间】：2020-08-18 05:23:21
【问题描述】：

我正在 .NET Core MVC 中创建一个订单项表单。我的表单中有添加按钮。单击添加按钮后，会生成带有一些 html 控件的表行。我的表单的html如下：

<div class="card">
            <div class="card-title"><h4>Order Information</h4></div>
            <div class="card-body">
                <table id="mytable" class="table">
                    <thead>
                        <tr>
                            <th>Item Name</th>
                            <th>Serial No</th>
                            <th>Quantity</th>
                            <th>Unit Price</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="extraPerson">
                            <td>
                                <select asp-for="OrderDtls[0].ItemName" class="form-control selItem"></select>
                            </td>
                            <td>
                                <input asp-for="OrderDtls[0].SerialNo" type="text" class="form-control" />
                            </td>
                            <td>
                                <input asp-for="OrderDtls[0].Quantity" type="number" class="form-control" />
                            </td>
                            <td>
                                <input asp-for="OrderDtls[0].Price" type="number" class="form-control" />
                            </td>
                            <td>
                                <a href="#" id="add">
                                    <i class="fa fa-plus" aria-hidden="true"></i>
                                </a>

                                <a href="#">
                                    <i class="fa fa-minus" aria-hidden="true"></i>
                                </a>
                            </td>
                        </tr>                            
                    </tbody>
                </table>
            </div>
        </div>

动态创建html控件的jQuery代码如下：

$(document).ready(function () {
        $("#add").click(function () {
            var html = $('#mytable tbody>tr:first').clone(true);            
            html.find('[class=selItem]').attr("id", "newIds");
            html.insertAfter('#mytable tbody>tr:last');

            return false;
        });
    });

现在在这段代码中

html.find('[class=selItem]').attr("id", "newIds");

我想用一个新的 ID 属性更改。但它没有发生。谁能给我建议如何做到这一点？

【问题讨论】：

标签： javascript jquery asp.net-mvc .net-core

【解决方案1】：

你使用了错误的类选择器，从

html.find('[class=selItem]').attr("id", "newIds");

到

html.find(".selItem").attr("id", "newIds");

$(document).ready(function () {
        $("#add").click(function () {
            var html = $('#mytable tbody>tr:first').clone(true);

            html.find(".selItem").attr("id", "newIds");
            html.insertAfter('#mytable tbody>tr:last');

            return false;
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
            <div class="card-title"><h4>Order Information</h4></div>
            <div class="card-body">
                <table id="mytable" class="table">
                    <thead>
                        <tr>
                            <th>Item Name</th>
                            <th>Serial No</th>
                            <th>Quantity</th>
                            <th>Unit Price</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="extraPerson">
                            <td>
                                
                                <select asp-for="OrderDtls[0].ItemName" class="form-control selItem"><option value="Test">Test</option></select>
                                
                                
                            </td>
                            <td>
                                <input asp-for="OrderDtls[0].SerialNo" type="text" class="form-control" />
                            </td>
                            <td>
                                <input asp-for="OrderDtls[0].Quantity" type="number" class="form-control" />
                            </td>
                            <td>
                                <input asp-for="OrderDtls[0].Price" type="number" class="form-control" />
                            </td>
                            <td>
                                <a href="#" id="add">Add
                                    <i class="fa fa-plus" aria-hidden="true"></i>
                                </a>

                                <a href="#">
                                    <i class="fa fa-minus" aria-hidden="true"></i>
                                </a>
                            </td>
                        </tr>                            
                    </tbody>
                </table>
            </div>
        </div>

【讨论】：