How to copy table row with dropdownlist in with jQuery
asp.net, asp.net-mvc, c#, html, jquery
Solution
First add `tbody` in your table like:
<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 is:
<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>
Problem
I have a table and I want to clone the last line of it after the Add New link is pressed. It works completely fine when I have only TextBoxes in my rows but it doesn't when there's a dropdown. Please help me to modify the jquery code. Here's the code of the table: ``` <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's the code that needs some improvement: ``` <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 to modify this line whith changing input to select, but it didnt help var suffix = $trNew.find(':input:first').attr('name').match(/\d+/);