<form id="form1" runat="server">
<div class="container">
<h2>Basic Table</h2>
<table class="table" id="maintable">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr class="data-contact-person">
<td>
<input type="text" name="f-name" class="form-control f-name01" /></td>
<td>
<input type="text" name="l-name" class="form-control l-name01" /></td>
<td>
<input type="text" name="email" class="form-control email01" /></td>
<td>
<button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>
</td>
</tr>
</tbody>
</table>
<button type="button" id="btnSubmit" class="btn btn-primary btn-md pull-right btn-sm" onclick="return btnSubmit_onclick()" onclick="return btnSubmit_onclick()" onclick="return btnSubmit_onclick()">Submit</button>
</div>
<script type="text/javascript">
$(document).ready(function () {
$(document).on("click", ".classAdd", function () { //
var rowCount = $('.data-contact-person').length + 1;
var contactdiv = '<tr class="data-contact-person">' +
'<td><input type="text" name="f-name' + rowCount + '" class="form-control f-name01" /></td>' +
'<td><input type="text" name="l-name' + rowCount + '" class="form-control l-name01" /></td>' +
'<td><input type="text" name="email' + rowCount + '" class="form-control email01" /></td>' +
'<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
'<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
'</tr>';
$('#maintable').append(contactdiv); // Adding these controls to Main table class
});
});
$(document).on("click", ".deleteContact", function () {
$(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls
});
</script>
<script type="text/javascript">
Can you answer this question?
Answer
0 Answers