Creating Nested layout DIV’s for Tabs

Hi Guys!
I’ve been developing my beta site (not yet live) and I am integrating a live last.fm stream of the songs I am listening to by using javascript to parse the API’s JSON and then place into tables (works very well):
[url]http://beta.mutant-tractor.com[/url]

Now, the trouble begins,
I currently have the data layed out all nice and neat in a table:
[URL=”http://dl.dropbox.com/u/17927147/Screen%20shot%202011-01-04%20at%2020.36.40.png”]Screenshot[/URL]

The “I’m Listening To” section is the section I wish to tab out like this:
[url]http://www.gayadesign.com/scripts/tabbed/[/url]

So that on hover over the Image the relevant meta data will move in,

The problem I’m now having is that apparently JQuery wont let me do this with tables, thus completely nullifying most of my scripting and I need to reformat the parsed data into nested DIVs rather than tables, and maintain the same layout…

The problem is, I CAN manage to create the parent DIVs that contain the images but cannot get the JSON data to be parsed into the child DIVs,

All DIVs are being created dynamically,

My code so far:

[CODE]
//Calculates date text
function calculateDateAgo(secAgo) {
var agoString, agoRange, agoScaled;
if(secAgo >= (agoRange = 60*60*24))
agoString = (agoScaled = Math.floor(secAgo/agoRange))+” “+(agoScaled>1?”days”:”day”) + ” ago”
else if(secAgo >= (agoRange = 60*60))
agoString = (agoScaled = Math.floor(secAgo/agoRange))+” “+(agoScaled>1?”hours”:”hour”) + ” ago”
else if(secAgo >= (agoRange = 60))
agoString = (agoScaled = Math.floor(secAgo/agoRange))+” “+(agoScaled>1?”minutes”:”minute”) + ” ago”
else if(secAgo >= -60)
agoString = “listening just now”;
else
agoString = “soon ;)”;
return agoString
}

//Shortens name to make it fit without multiple lines
function truncateName(name, l) {
return name.length > l ? name.substr(0,l-2) + “u2026” : name
}

//Parses and prints JSON
function lfmRecentTracks(JSONdata) {

try {
var eRow, eCell, eImg, eLink, eSpan, eNew;
//Master DIV
var eMain = document.getElementById(“lfmRecentTracks”);
//DIV containing artwork
var eArt = document.getElementById(“lfmArtRow”);
//Stores and passes JSON data to loops
var oTracks = new Array().concat(JSONdata.recenttracks.track);

//THIS WORKS
for (var i = 0; i < oTracks.length; i++) {
//insert coverart image
var divTag = document.createElement(“div”);
divTag.setAttribute(“align”,”center”);
divTag.style.margin = “0px auto”;
divTag.className =”dynamicDiv”;
divTag.innerHTML = “This HTML Div tag created using Javascript DOM dynamically.”;
document.body.appendChild(divTag);
divTag.className = “lfmTrackImageCell”;
if(oTracks[i].image[1][“#text”] != “”) {
eImg = document.createElement(“img”);
divTag.appendChild(eImg);
eImg.src = oTracks[i].image[1][“#text”];
eImg.className = “lfmTrackImage”;
}else{
eImg = document.createElement(“img”);
divTag.appendChild(eImg);
eImg.src = “http://cdn.last.fm/flatness/icons/res/3/track.png”;
eImg.className = “lfmTrackImageNotFound”;
}
}

//THIS DOESNT
for (var i = 0; i < oTracks.length; i++) {
//FROM HERE
var innerDiv = document.createElement(“div”);
eCell.appendChild(innerDiv);
//TO HERE DOESNT WORK
eCell.className = “lfmTrackInfoCell”;
//insert track link
eLink = document.createElement(“a”);
eLink.appendChild(document.createTextNode( truncateName(oTracks[i].name, 25) ));
eCell.appendChild(eLink);
eLink.href = oTracks[i].url;
eLink.target = “new”;
eLink.className = “lfmTrackTitle”;

//insert artist name
eSpan = document.createElement(“span”);
eSpan.appendChild(document.createTextNode(truncateName(oTracks[i].artist[“#text”], 22) ));
eCell.appendChild(eSpan);
eSpan.className = “lfmTrackArtist”;

//insert date
eSpan = document.createElement(“span”);
eCell.appendChild(eSpan);
eSpan.appendChild(document.createTextNode( (typeof oTracks[i].date==”undefined”?”now playing”:calculateDateAgo(new Date().getTime()/1000 – oTracks[i].date.uts)) ));
eSpan.className = “lfmTrackDate”;
}
} catch(e) {}
}[/CODE]

My idea would have a layout somewhat like this, then as they hover over the images the track name, artist and time are swapped to the relevant one as in the link to gayadesign above ?

|[Image1]|[Image2]|[Image3]|[Image4]|

|[Image1]|[Image2]|[Image3]|[Image4]|
———————————————–

[Track Name]
[Artist]

[How long ago it was played]
———————————————–

Any help would be greatly appreciated!
Thanks!
Myles

Also in #JavaScript _↴