I've the following table in my application. I've a ajax request which will fetch the results to be shown in the table. How add these results to the table with out overridding the header every time?
<table id="itemList">
<td>Name</td>
<td>Price</td>
<td>Quantity</td>
<td>Total</td>
</table>
Then the ajax data is as shown below
var items = [
{ Name: "Apple", Price: "80", Quantity : "3", Total : "240" },
{ Name: "Orance", Price: "50", Quantity : "4", Total : "200" },
{ Name: "Banana", Price: "20", Quantity : "8", Total : "160" },
{ Name: "Cherry", Price: "250", Quantity : "10", Total : "2500" }
];
Now I'm trying something like this but it is not working
var rows = "";
$.each(items, function(){
rows += "<tr><td>" + this.Name + "</td><td>" + this.Price + "</td><td>" + this.Quantity + "</td><td>" + this.Total + "</td></tr>";
});
$( "#itemList" ).text('<tr><td>Name</td><td>Price</td><td>Quantity-</td><td>Total</td></tr>' + rows );
