More efficient way to generate elements and associate $.data()? [jQuery]

Question

I'm looking for a more efficient way to generate some DOM changes and update the .data() object.

Presently, data is provided in an array of objects and I'm building the strings in sections, appending them to the table body, and adding the .data object onto the element.

Here's a snapshot.

for (i in data.users) {
    //Build the string
    var rowData = "<tr class=\"";
        rowData += (i%2) ? "odd":"even";
        rowData +="\">";
            rowData +="<td>";
            rowData +=data.users[i]["FirstName"];
            rowData +="</td>";
            rowData +="<td>";
            rowData +=data.users[i]["LastName"];
            rowData +="</td>";
            rowData +="<td>";
            rowData +=data.users[i]["UserName"];
            rowData +="</td>";
            //Could be many more columns
        rowData +="</tr>";

    //Change the DOM, add to the data object.
    $(rowData).appendTo("#list > table > tbody").data('ID', data.users[i]["ID"]);
}

I'm mostly upset over having to manipulate the DOM n times, rather than make one change with all the data-- or be able to release data as if there were a buffer. I would also like to update .data() all-at-once.

Answer 1

Using jQuery 1.4.3+ you can just put a data-XXX attribute into a node. That is automatically picked by jQuery into the data() hash for that node.

var Buffer = [];
for (i in data.users) {
    //Build the string
    Buffer.push("<tr data-ID=\"" + data.users[i]["ID"] + "\" class=\"");
    Buffer.push((i%2) ? "odd":"even");
    Buffer.push("\">");
    Buffer.push("<td>");
    Buffer.push(data.users[i]["FirstName"]);
    Buffer.push("</td>");
          // and so forth
    Buffer.push("</tr>");        
}

$("#list > table > tbody").append(Buffer.join(''));

Answer 2

I am assuming that the data is coming from some server-side source somewhere. Why don't you using something like jqGrid in which you'll pass a JSON object (or XML or etc.) from your server (AKA, all manipulation is done server side) and then just display the data to the users. The graphs that jqGrid generates are very nice and you won't need to do all the work you are currently doing.

Answer 3

take a look at the jquery templates plugin .. still in beta but very nice! http://api.jquery.com/category/plugins/templates/

Answer 4

I would vote for not putting that information in the DOM at all. Use a JS model to manage that data, then query it as needed. This keeps the DOM uncluttered and properly and efficiently separates semantic markup and the data that supports/drives it. MVC ftw!