Generating DOM manually as you have in your example is probably the
slowest method you can use. Using a document fragment would be much
faster and is the way that jQuery 1.3 does its appending. Straight HTML
insertion is the fastest though.
One method that I've used is to basically roll out a templating system
using just html and classes.
build an html template:
<script type="text/html" id="my-template">
<table>
<thead>
<tr>
<th>Name</th><th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"></td>
<td class="age"></td>
</tr>
</tbody>
</table>
</script>
then in jQuery:
var template = $($("#my-template").html());
var rowtemplate = template.find('tbody tr').clone();
//prepare tbody
var tbody = template.find('tbody tr').remove().end().find('tbody');
var newrow;
for(i in data){
newrow = rowtemplate.clone();
for(k in data[i]){
newrow.find("."+k).html(data[i][k]);
}
newrow.appendTo(tbody);
}
It's not the most DRY solution, but handy when a full blown templating
system is overkill.
SeeVik wrote:
Thanks for the reply Jack. the JST Template looks cool. I will surely
look into it.
Just for the record, if anybody can throw some light on the original
question, it would be really helpful.
I don't really want to be left clueless about this thing in jQuery.
Thanks and Regards
Vikram
On Mar 4, 12:04 pm, Jack Killpatrick <j...@ihwy.com> wrote:
This isn't jquery-specific, but I've been using this for a couple years
now to generate html from json data:
http://code.google.com/p/trimpath/wiki/JavaScriptTemplates
works great.
- Jack
SeeVik wrote:
Hello all,
I am using Symfony with jQuery plugin. The thing is I am getting some
data from database in JSON format and I want to use jQuery to display
a table using that data on the fly. I was wondering is jQuery the best
way to do this? Or will it be an overkill? Should I use simple DOM
methods for this task like...
divResult = document.getElementById("divName");
table = document.createElement("table");
tr = document.createElement("tr");
td = document.createElement("td");
tr.appendChild(tr);
table.appendChild(tr);
divResult.appendChild(table);
If I should use jQuery, can somebody give me a hint which methods to
use for the above jQuery code?
Thanks and Regards
Vikram
