How to add two text boxes texts to html table with button click and increment rows dynamically?

Question

I have a drop-down list, two textboxes, add button and a table. There are two things which I need to do. First thing is, fill one textbox with the drop-down list's selected text and the user will enter a value in second text box. I could find a solution for that part and it is done. The second part is, I need to add the texts in those two textboxes to an HTML table with a button click in javascript or jquery. The table rows must increase by one with the button click and textboxes texts. Can someone please help me. I am new to scripts and that is why I find it difficult to do this. Thanks in advance. Below is what I have done already.

Two text boxes and Add Button with the Table.

         <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 code to copy dropdown text to textboxes.

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

score 0 · Answer 1 · answered Aug 10 '18 at 07:07

you can find answers in the next articles

append a row to your table Add table row in jQuery
select and edit table cells How to select and change value of table cell with jQuery? or Using jQuery to edit individual table cells
button click event handling How to Handle Button Click Events in jQuery? or https://api.jquery.com/click/

How to add two text boxes texts to html table with button click and increment rows dynamically?

1 Answers1