Yea! a minimalistic one, without much xBrowser checks, would be as follows,
function render(o){
if(!o.o) return;
var rv = document.createElement(o.o);
if(o.p){
var pC = o.p.length - 1;
for(var i = 0; i < pC; i += 2){
rv.setAttribute(o.p[i], o.p[i+1]);
}
}
if(o.c){
var cC = o.c.length;
for(var i = 0; i < cC; i++)
rv.appendChild(render(o.c[i]));
}
if(o.txt)
rv.innerHTML = o.txt;
return rv;
}
Now what the heck is written above ? no wonder, it is just a recursive function which can handle json page structures. Only thing is that the page structuring can go heck and complex, though the renderer is too simple with only just a handful of statements. The var names are intentionally kept at a minimum to make the function lighter.
We will just analyze an example usage for the above,
function drawTable(){
var gTable = {o:'table', p:['border','0','cellpadding','0','cellspacing','0','align','center'],
c:[
{o:'tr',
c:[{o:'td',p:['align','center'],txt:'First Cell, First Row'},
{o:'td',p:['align','center'],txt:'2n Cell, 1st Row'},
{o:'td',p:['align','right'],txt:'4.00'}
]
},
{o:'tr',
c:[{o:'td',p:['align','center'],txt:'First Cell, Second Row'},
{o:'td',p:['align','center'],txt:'2n Cell, 2nd Row'},
{o:'td',p:['align','right'],txt:'34.00'}
]
},
{o:'tr',
c:[{o:'td',p:['align','center'],txt:'First Cell, Third Row'},
{o:'td',p:['align','center'],txt:'2n Cell, 3rd Row'},
{o:'td',p:['align','right'],txt:'42.50'}
]
}
]
};
var st = render(gTable);
document.getElementsByTag('body')[0].appendChild(st);
}
lol, your table is there, and you have a neat page. I do agree that this does not help you in SEO, but it does a lot for the new web trendz, and goes hand in hand with the web 2.0, where there are lesser page refreshes, and more rich pages, with reduced server traffic!
it does not take much of an ado, to design a db and drop a set of php5 classes to handle a whole site off the structural database using the inbuilt json functions. thus redefining the template to a json object, I do agree that the structure is complex, and will be mumbo for most of the people, still a middle man, like a front to back translator gui if developed can support this.
The only cliche with the above def is that you will need to have a master layer or div to hold multiple tables, and divs, and the outermost div should be inserted into the body.
Well silly me!, never tested it any where else other than FF on linux, and it was working fine.. Till today morning, when tried in IE, saw that several things were not working.. and finally had to do a hack since I had used this for a really rich application. And the hack was heck
if(navigator.appName.indexOf('Explorer') != -1){
var bHtml = document.getElementsByTag('body')[0].innerHTML;
document.getElementsByTag('body')[0].innerHTML = bHtml;
}
Well I’m not kidding, actually in the IE it was not showing anything atall, but when I did the dom debug, I could see the generated code sitting there.. and I could not resist the desire to try this.