Hi,
I want to display data from json in html table
following is my working code
<div id="showData"></div>
<div id="disp"></div>
<script type="text/javascript" language="javascrit">
var myBooks = [{ "Id": 14, "FirstName": "kiran", "LastName": "Kumar", "Company": "HCL" }, { "Id": 15, "FirstName": "Satya", "LastName": "kumar", "Company": "TCS" }, { "Id": 17, "FirstName": "Sarin", "LastName": "Hasin", "Company": "BBC" }, { "Id": 18, "FirstName": "jkjkjk", "LastName": "jkjkjk", "Company": "hhh" }, { "Id": 19, "FirstName": "hhjh", "LastName": "jhjhjh", "Company": "hkkkll" }]
var col = [];
for (var i = 0; i < myBooks.length+1; i++) {
for (var key in myBooks[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
if(i=myBooks.length)
{
col.push("Edit");
}
if(i=myBooks.length+1)
{
col.push("Delete");
}
}
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
for (var i = 0; i < myBooks.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = myBooks[i][col[j]];
}
if (j=col.length)
{
tabCell.innerHTML="<input type='button' id='btn2' value='delete'/>";
}
if (j=col.length+1)
{
tabCell.innerHTML="<input type='button' id='btn1' value='Edit'/>";
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);
</script>
table headers are Id,Firstname,LastName,company,Edit,Delete
Id,Firstname,LastName,company are from json table
and I added edit and delete in header
my requirement is to add delete and edit button in every row
But my code displays edit button under delete header
and under edit header there is no edit button is displaying there is a text undefined under delete header
How to solve this
Regards
Baiju