Блог

Я пытаюсь динамически добавлять строки таблицы, состоящие из выпадающего списка, который привязан к базе данных. Вот мой код: HTML-форма

 @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);
            }
  

Как вы можете видеть, у меня есть один выпадающий список, три текстовых поля и одна кнопка добавления.Чего я хочу
1.To повторите ту же структуру, что и в первой строке. но как прочитать имя тега элемента для drpdown, я не уверен, пробовал, var inp1 = new_row.cells[1].getElementsByTagName('select')[0]; но не знаю, правильно ли это.
2. Идентификаторы выпадающего списка и текстовых полей также должны отличаться, поскольку я получу значения позже, чтобы поместить их в базу данных.
Любая идея будет оценена.

в представлении вы должны использовать таблицу следующим образом:

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

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