How to replace current table after ajax success - ajax

Question

i want to repalce the current table after the success of ajax call and show new table.
this is my existing table:
<div class="container">
<h2 class="well col-lg-4">Booking History</h2>
<table id="tab" class="table table-bordered danger table-hover" style="color:orangered">
<thead>
<tr>
<th>S.N</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Booking Date</th>
<th>Booked On</th>
<th>Vehile Number</th>
<th>Parking Slot no.</th>
</tr>
</thead>
<tbody>
#{ int i = 1;}
#foreach (var item in Model)
{
<tr>
<td>#i</td>
<td>#item.firstName</td>
<td>#item.lastName</td>
<td>#item.email</td>
<td>#DateTime.Parse(item.bookingDate).ToString("dd MMM yyyy")</td>
<td>#DateTime.Parse(item.bookedOn).ToString("dd MMM yyyy")</td>
<td>#item.vehicleNo</td>
<td>#item.parkingSlot_id</td>
</tr>
i++;
}
</tbody>
</table>
<div class="text-center">
#Html.PagedListPager(Model, page => Url.Action("SearchBooking", new { page, fromDate = ViewBag.fromD,toDate= ViewBag.toD }))
</div>
</div>
This is my script:
<script>
$(document).ready(function () {
$('#searchByEmail').on('click', function () {
var emailData = $('#emailValue').val();
$.ajax({
type: "POST",
url: "/Admin/SearchByEmail",
dataType: "JSON",
data: { email: emailData },
success: function (result) {
if (result != 0) {
JSON.stringify(result);
var tr;
tr = $('<tr/>');
tr.append("<th>First Name </th>");
tr.append("<th>Last Name </th>");
tr.append("<th>Email</th>");
tr.append("<th>License No.</th>");
tr.append("<th>Booking Date</th>");
tr.append("<th>Booked On</th>");
tr.append("<th>Vehicle No.</th>");
tr.append("<th>Parking Slot No.</th>");
$('table').append(tr);
for (var i in result) {
tr = $('<tr/>');
tr.append("<td>" + result[i].firstName + "</td>");
tr.append("<td>" + result[i].lastName + "</td>");
tr.append("<td>" + result[i].email + "</td>");
tr.append("<td>" + result[i].licenseNo + "</td>");
tr.append("<td>" + result[i].bookingDate.slice(0, -12) + "</td>");
tr.append("<td>" + result[i].bookedOn.slice(0, -12) + "</td>");
tr.append("<td>" + result[i].vehicleNo + "</td>");
tr.append("<td>" + result[i].parkingSlot_id + "</td>");
$('table').append(tr);
}
}
},
error: function () {
alert('failure');
}
})
$('#emailValue').val('');
})
});
</script>

Answer 1

try this
use $("#tab").html('') before you append table
Like,
$("#tab").html('');
$("#tab").append(NewTable);