Universal html template
Posted: Fri Aug 29, 2014 12:29 pm
Here is an universal html template. The output result will be chatged if SQL query will changed.
For example for sqlOutput is :
for will:
For example for sql
Code: Select all
select * from assets_v1
Code: Select all
select * from payee_v1
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Andre's JSON Table</title>
<link href = "master.css" rel = "stylesheet" />
<script src = "ChartNew.js"></script>
<script src="sorttable.js"></script>
</head>
<body onload="loadingBody()">
<table class="table" id="mytable">
</table>
</body>
<script>
var json =<TMPL_VAR JSONCONTENTS>;
var _tbody_ = document.createElement('tbody'),
_thead_ = document.createElement('thead'),
_tr_ = document.createElement('tr'),
_th_ = document.createElement('th'),
_td_ = document.createElement('td');
// Builds the HTML Table out of myList json data from Ivy restful service.
function buildHtmlTable(arr) {
var tbody = _tbody_.cloneNode(false);
for (var i=0, maxi=arr.length; i < maxi; ++i) {
var tr = _tr_.cloneNode(false);
for (var key in arr[i]) {
if (arr[i].hasOwnProperty(key)) {
var td = _td_.cloneNode(false);
td.appendChild(document.createTextNode(arr[i][key] || ''));
}
tr.appendChild(td);
}
tbody.appendChild(tr);
}
return tbody;
}
function getColumnHeaders(arr)
{
var thead = _thead_.cloneNode(false);
var tr = _tr_.cloneNode(false);
for (var i=0, l=1; i < l; i++) {
for (var key in arr[i]) {
if (arr[i].hasOwnProperty(key)) {
var th = _th_.cloneNode(false);
th.appendChild(document.createTextNode(key));
tr.appendChild(th);
}
}
thead.appendChild(tr);
}
return thead;
}
//document.getElementById('myhead').innerHTML = '';
document.getElementById('mytable').appendChild(getColumnHeaders(json));
document.getElementById('mytable').appendChild(buildHtmlTable(json));
</script>
</html>