Javascript 如何通过单击按钮并动态增加行数向html表中添加两个文本框文本？

我有一个下拉列表，两个文本框，添加按钮和一个表格。我需要做两件事。 首先，用下拉列表中选定的文本填充一个文本框，用户将在第二个文本框中输入一个值。我可以找到一个解决方案，这一部分已经完成。 第二部分是，我需要在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>

@编辑器（“CompTxt”，new{htmlAttributes=new{@class=“form control”，@readonly=“readonly”，@style=“width:80px”}）
@编辑器（“ValTxt”，new{htmlAttributes=new{@class=“form control”，@style=“width:80px”}）
@Html.DisplayName（“说明”）
@Html.DisplayName（“值”）
@Html.DisplayName（“操作”）
@编辑器（“CompDes”，new{htmlAttributes=new{@class=“form control”，@readonly=“readonly”，@style=“width:80px”}）
@编辑器（“Val”，new{htmlAttributes=new{@class=“form control”，@style=“width:80px”}）
@ActionLink（“删除”、“删除”）

将下拉文本复制到文本框的Javascript代码

<script>//copy dropdown text to textbox
$(document).ready(function () {
    $('#ddlCompositions').change(function () {
        $('#CompTxt').val($(this).find("option:selected").text())
    });
  });
 </script>

//将下拉文本复制到文本框
$（文档）.ready（函数（）{
$（'#ddlCompositions'）。更改（函数（）{
$（'#CompTxt'）.val（$（this）.find（“option:selected”）.text（））
});
});

您可以在下一篇文章中找到答案

• 在表中追加一行

• 选择并编辑表格单元格或

• 按钮单击事件处理或