Динамически сгенерируйте HTML control и измените атрибут ID с помощью jQuery in ASP. NET Core MVC - PullRequest
Новая
       31

Динамически сгенерируйте HTML control и измените атрибут ID с помощью jQuery in ASP. NET Core MVC

0 голосов
/ 03 мая 2020

Я создаю форму заказа в. 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>

А jQuery код для динамического создания элементов управления html находится ниже: 

$(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 с новым. Но этого не происходит. Кто-нибудь может дать мне предложение, как это сделать?

1 Ответ

2 голосов
/ 04 мая 2020

Вы используете неправильный селектор классов, измените с 

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