Как добавить два текстовых поля текстов в HTML-таблицу с помощью нажатия кнопки и динамически увеличивать строки?

У меня есть выпадающий список, два текстовых поля, кнопка добавления и таблица. Есть две вещи, которые мне нужно сделать. Во-первых, заполните одно текстовое поле выбранным текстом раскрывающегося списка, и пользователь введет значение во второе текстовое поле. Я мог бы найти решение для этой части, и это сделано. Вторая часть заключается в том, что мне нужно добавить тексты этих двух текстовых полей в таблицу HTML нажатием кнопки в javascript или jquery. Строки таблицы должны увеличиваться на единицу с помощью нажатия кнопки и текстовых полей. Может кто-нибудь, пожалуйста, помогите мне. Я новичок в сценариях, и поэтому мне трудно это сделать. Заранее спасибо. Ниже то, что я уже сделал.

Два текстовых поля и кнопка "Добавить" с таблицей.

         <div class="form-group">
                <div class="col-md-2">
                </div>
                    <div class="col-md-2">
                        @Html.Editor("CompTxt", new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", @style = "width:80px" } })
                    </div>
                    <div class="col-md-2">
                        @Html.Editor("ValTxt", new { htmlAttributes = new { @class = "form-control", @style = "width:80px" } })
                    </div>
                <div class="col-md-2">
                    <input class="btnAdd btn btn-primary" style="width:80px" type="button" name="name" value="Add" onclick="insertRow();"/>
                </div>
              </div>
              <div class="form-group">
                    <div class="col-md-2"></div>
                    <div class="col-md-7">
                        <table id="CompTable" class="table table-striped">
                            <thead>
                                <tr>
                                    <th>
                                        @Html.DisplayName("Description")
                                    </th>
                                    <th>
                                        @Html.DisplayName("Value")
                                    </th>

                                    <th>
                                        @Html.DisplayName("Action")
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        @Html.Editor("CompDes", new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", @style = "width:80px" } })
                                    </td>
                                    <td>
                                        @Html.Editor("Val", new { htmlAttributes = new { @class = "form-control", @style = "width:80px" } })
                                    </td>

                                    <td>
                                        @Html.ActionLink("Remove", "RemoveRow")
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

Javascript код для копирования выпадающего текста в текстовые поля.

<script>//copy dropdown text to textbox
$(document).ready(function () {
    $('#ddlCompositions').change(function () {
        $('#CompTxt').val($(this).find("option:selected").text())
    });
  });
 </script>
Источник

1 ответ

Вы можете найти ответы в следующих статьях

Источник
Другие вопросы по тегам