如何通过按钮单击将两个文本框文本添加到 html 表格并动态增加行数？答案

【问题标题】：How to add two text boxes texts to html table with button click and increment rows dynamically?如何通过按钮单击将两个文本框文本添加到 html 表格并动态增加行数？
【发布时间】：2019-01-17 15:51:31
【问题描述】：

我有一个下拉列表、两个文本框、添加按钮和一个表格。我需要做两件事。第一件事是，用下拉列表的选定文本填充一个文本框，用户将在第二个文本框中输入一个值。我可以找到该部分的解决方案，并且完成了。第二部分是，我需要通过在 javascript 或 jquery 中单击按钮将这两个文本框中的文本添加到 HTML 表中。表格行必须随着按钮单击和文本框文本增加一。有人可以帮帮我吗。我是脚本新手，这就是为什么我觉得很难做到这一点。提前致谢。下面是我已经做过的。

两个文本框和带有表格的添加按钮。

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

【问题讨论】：

标签： javascript jquery html asp.net-mvc-viewmodel asp.net-mvc-views