Add table rows dynamically consisting dropdown using JavaScript/jquery

Question

I'm trying to add table rows dynamically consisting of dropdown list which is bind from db. Here's my code: HTML Form

@model IP.Models.Cell
<table id="tbl">
        <tr>            
            <td>NAME</td>
            <td>Address count</td>
            <td>Salary</td>
            <td>Comment</td>  
            <td>Add</td>          
        </tr>
            <tr class="">                
                <td>@Html.DropDownList("cList", new SelectList(Model.cList, "UName", "UDesc"), "Please Select", new { @class = "form-control"})</td>
                <td><input id="tadc" type="number" class="form-control" /></td>                
                <td><input id="tsal" type="number" class="form-control" /></td>
                <td><input id="tcom" type="number" class="form-control" /></td>
                <td><input type="button" value="Add" id="abc" class="value3" onclick="insRow()" /></td>
            </tr>
</table>

Javascript

function insRow() {
                console.log('hi');
                var x = document.getElementById('tbl');
                var new_row = x.rows[1].cloneNode(true);
                var len = x.rows.length;                
                var inp1 = new_row.cells[1].getElementsByTagName('select')[0];
                inp1.id += len;
                inp1.value = '';
                var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
                inp2.id += len;
                inp2.value = '';
                var inp3 = new_row.cells[3].getElementsByTagName('input')[0];
                inp3.id += len;
                inp3.value = '';
                var inp4 = new_row.cells[4].getElementsByTagName('input')[0];
                inp4.id += len;
                inp4.value = '';
                x.appendChild(new_row);
            }

As you can see i have one dropdown list and three text fields and one Add button.What i want 1.To repeat the same structure as of first row.but how to read element tag name for drpdown i am not sure tried as var inp1 = new_row.cells[1].getElementsByTagName('select')[0]; but don't know whether it is correct. 2.The ids of the dropdown & textfields should also be different since I'll retrieve the values later to put it in a database. Any idea would be appreciated.

Nhien · Accepted Answer · 2020-09-29 15:47:13Z

1

in view you should use table like this:

  <table id="tbl">
     <thead>
                <tr>            
        <td>NAME</td>
        <td>Address count</td>
        <td>Salary</td>
        <td>Comment</td>  
        <td>Add</td>          
    </tr>
    </thead>
    <tbody>
       <tr class="">                
            <td>@Html.DropDownList("cList", new SelectList(Model.cList, "UName", "UDesc"), "Please Select", new { @class = "form-control"})</td>
            <td><input id="tadc" type="number" class="form-control" /></td>                
            <td><input id="tsal" type="number" class="form-control" /></td>
            <td><input id="tcom" type="number" class="form-control" /></td>
            <td><input type="button" value="Add" id="abc" class="value3" onclick="insRow()" /></td>
        </tr>
    </tbody>
 </table>

and in js:

  <script>
  var i =0;
  function insRow() {
       let id1 = "tadc"+i;
       let id2 = "tsal"+i;
       let id3 = "tcom"+i;
       let selectid = "select"+i;
       let newRowContent = "<tr>"
                            + "<td id='id1'> new drop down here </td>"
                            + "<td id='id2'>  new text here </td>"
                            + "<td id='id3'>  new text here </td>"
                            + "<select class='form-control' id='selectid'><option selected='selected'>Select</option></select>"
                            + "</tr>";
                        $("#tbl tbody").append(newRowContent);
       i++;
}
</script>

edited Sep 29, 2020 at 15:47

answered Sep 29, 2020 at 2:41

Nhien

1741 gold badge1 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Diksha Kumari Over a year ago

Nhien id's didn't change for new textbox and if i use new dropdown in <td> <td>@Html.DropDownList("cList", new SelectList(Model.cList, "UName", "UDesc"), "Please Select", new { @class = "form-control"})</td> it throw error 'System.Collections.Generic.List<IP.Models.MessageModel>' does not contain a definition for 'upcList'"

Nhien Over a year ago

var i = 0; and then id of textbox and dropdown will be: idtextbox + i; and when click button i++;

Diksha Kumari Over a year ago

can you suggest any any dropdown which can be put at <td> new drop down here </td>" as i put <td>@Html.DropDownList("FooBarDropDown", new List<SelectListItem> { new SelectListItem { Text = "Option 1", Value = "1" }, new SelectListItem { Text = "Option 2", Value = "2" }, new SelectListItem { Text = "Option 3", Value = "3" }, })</td> in both controller and js but click event not happen

Diksha Kumari Over a year ago

@Nhein i am trying to genrate id dynamically but not happen what is exact syntax i am trying like this function insRow() { var i=0; i++; let newRowContent = "<tr>" +"<td> <select class='form-control' id='upcList'+i+><option selected='selected'>Select</option></select></td>" + "<td><input id='tdesc+i' type='number' class='form-control' /></td>"

Collectives™ on Stack Overflow

Add table rows dynamically consisting dropdown using JavaScript/jquery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related