...

View Full Version : Creating HTMLtable dynamically from json array



sourabh1989
07-20-2012, 09:15 AM
CODE : [var array_cells = [
{ "name" : "abc" , "sirname" : "x y z" , },
{ "name" : "def" , "sirname" : "x" , },
{ "name" : "ghj" , "sirname" : "y" , },
]; ]

This is my json array in a file named "json.js" and i want to create a html table dynamically through javascript which is written in a file named "file.js" which take data from array of file "json.js" and there is another file named "table.html" in which i have just sourced both files i.e."json.js" & "file.js".

values of sirname like "x y z" from file "json.js" has their own attributes also so i want to make my html table like that when i click on "x y z" in the html table their attributes get opened in some other window. "x y z " must be hyperlinked to thier attributes.

Old Pedant
07-20-2012, 10:21 PM
Well, one way:


<html>
<head>
<style type="text/css">
.datatable td {
font-size: x-large;
}
.name {
color: red;
}
.surname {
font-style: italic;
}
</style>
</head>
<body>
stuff here
<div id="content"></div>
and stuff here

<script type="text/javascript">
var array_cells = [
{ "name" : "abc" , "surname" : "x y z" },
{ "name" : "def" , "surname" : "x" },
{ "name" : "ghj" , "surname" : "y" }
];

var tbl = document.createElement("table");
tbl.className = "datatable";
tbl.border = "1";
tbl.cellPadding = "10";

var tbody = document.createElement("tbody");
for ( var r = 0; r < array_cells.length; ++r )
{
var row = document.createElement("tr");
var arrayRow = array_cells[r];
var Name = arrayRow["name"];

var td = document.createElement("td");
td.className = "name";
td.appendChild( document.createTextNode(Name) );
row.appendChild(td);

td = document.createElement("td");
var link = document.createElement("a");
link.className = "surname";
var Surname = arrayRow["surname"];
link.href = "showSurnameInfo.html?surname=" + encodeURIComponent(Surname);
link.appendChild( document.createTextNode( Surname ) );
td.appendChild( link );
row.appendChild(td);

tbody.appendChild(row);

}
tbl.appendChild(tbody);
document.getElementById("content").appendChild(tbl);
</script>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum