How to copy a row of a table with a dropdown in jQuery

Question

I have a table and I want to clone the last row after clicking the "Add new" link. It works fine when I only have TextBoxes in my lines, but it doesn’t, when there is a drop down list. Help me modify jquery code. Here is the table code:

<div><a href="#" id="addNew">Add New</a></div> <table id="dataTable"> <tr> <th>Item</th> <th>Cost</th> <th></th> </tr> @if (Model != null && Model.Count > 0) { int j = 0; foreach (var i in Model) { <tr> <td>@Html.DropDownListFor(a => a[j].fk_purchase_id, (SelectList)ViewBag.fk_purchase_id, null, htmlAttributes: new { @class = "form-control"})</td> <td>@Html.TextBoxFor(a => a[j].cost, htmlAttributes: new { @class = "form-control" })</td> <td> @if (j > 0) { <a href="#" class="remove">Remove</a> } </td> </tr> j++; } } </table> 

And here is the code that needs to be improved:

  <script> $(function () { //1. Add new row $("#addNew").click(function (e) { e.preventDefault(); var $tableBody = $("#dataTable"); var $trLast = $tableBody.find("tr:last"); var $trNew = $trLast.clone(); alert($trNew.html); var suffix = $trNew.find(':input:first').attr('name').match(/\d+/); $trNew.find("td:last").html('<a href="#" class="remove">Remove</a>'); $.each($trNew.find(':input'), function (i, val) { // Replaced Name var oldN = $(this).attr('name'); var newN = oldN.replace('[' + suffix + ']', '[' + (parseInt(suffix) + 1) + ']'); $(this).attr('name', newN); //Replaced value var type = $(this).attr('type'); if (type.toLowerCase() == "text") { $(this).attr('value', ''); } }); $trLast.after($trNew); }); }); </script> 

I tried changing this line with changing the input to select , but it didn’t help

var suffix = $ trNew.find (': input: first'). attr ('name'). match (/ \ d + /);

Answer 1

First add tbody to the table:

  <table id="dataTable"> <thead> <tr> <th>Item</th> <th>Cost</th> <th></th> </tr> </thead> <tbody> @if (Model != null && Model.Count > 0) { int j = 0; foreach (var i in Model) { <tr> <td>@Html.DropDownListFor(a => a[j].fk_purchase_id, (SelectList)ViewBag.fk_purchase_id, null, htmlAttributes: new { @class = "form-control"})</td> <td>@Html.TextBoxFor(a => a[j].cost, htmlAttributes: new { @class = "form-control" })</td> <td> @if (j > 0) { <a href="#" class="remove">Remove</a> } </td> </tr> j++; } } </tbody> </table> 

And your script:

  <script> $(function () { $("#addNew").click(function (e) { e.preventDefault(); var last = $('#dataTable>tbody>tr:last'); if (last.length > 0) { var name = last.children().find('input,select')[0].name; var index = Number(name.replace(/[^0-9]/gi, '')) + 1; var tr = ('<tr>' + last.html().replace(/[0-9]+__/gi, index + '__') + '</tr>') .replace(/\[[0-9]+\]+[.]/gi, '[' + index + '].'); $('#dataTable tbody').append(tr); } }); }); </script>