December 18th, 2012, 09:51 AM
|
|
Registered User
|
|
Join Date: Oct 2008
Posts: 17
Time spent in forums: 6 h 7 m 29 sec
Reputation Power: 0
|
|
|
jQuery - Trying to add new row to display json data
I created a JSON variable with 2 records that have 2 fields each. Inside my js function I loop through the JSON array and add each JSON field pair inside a table cell. After the 4 fields are written, the .each method keeps adding the fields into the same table row. I have tried appending a </tr>, etc, to no avail. It is like the .each cycles all the way through the array and ignores attempts to create a new row. Please see code below and offer any suggestions - thank you! I saw some similar questions but nothing quite like this I found helped.
Code:
function createHTMLTable(tableBody, rows, cols) {
if (tableBody == null || tableBody.length < 1) return;
var jsonp = '[{"Flooring":"Spruce","Price":"$7.68","#SF":"780","Total$":"xyz"},{"Flooring":"Bamboo","Price":"$6.47","#SF":"$6.50","Total$":"xyz"}]';
var flooring = '';
var trow = $("<tr>");
var obj = $.parseJSON(jsonp);
$.each(obj, function() {
$("<td>")
.addClass("tableCell")
.text(this['Flooring'])
.data("col", 1)
.appendTo(trow);
$("<td>")
.addClass("tableCell")
.text(this['Price'])
.data("col", 2)
.appendTo(trow);
$("<td>")
.addClass("tableCell")
.text(this['#SF'])
.data("col", 3)
.appendTo(trow);
$("<td>")
.addClass("tableCell")
.text(this['Total$'])
.data("col", 4)
.appendTo(trow);
//$('#tableBody').append( $("</td></tr>") );//not working
//$("</tr>") .appendTo(tableBody); //not working
//$(this).parents('<tr>').append(); //not working
});
trow.appendTo(tableBody);
} //function
Thank you in advance for your help!
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
