...

View Full Version : Creating an array of tables



siferion
07-18-2006, 05:50 PM
Currently i'm working on improving a current design to a website i work on regularly. At the moment the page i'm working on grabs a list of members of my everquest guild from an xml file, populates the table with a row for each member, and column for each piece of info about that member. The currentpage can be seen at http://www.riseoftheforsaken.com/rotf%20website/roster.htm.

What i'm trying to do is seperate players by classes inside the table. Like before the list of bards would be a single cel on it's own row saying Bard: then the list of bards afterward. So on for each class. Not sure about the best way to do this but currently i'm trying this method:
1) Create an array of 16 tables (1 for each possible class in the game itself)
2) At the end of the fillTable function for members, is a switch, the switch checks the class of the member, and populates the proper table acordingly.
3) After the array is done being built, it does a loop 0 to 15, adding the row for each class and appending thier table from the table array right after that row.

The problem is that it's not populating each table with the member data. I suspect this is something to do with order of creation but am unsure as i'm still learning how to deal with dom objects.

The current source i'm trying will be in the post below this one if it helps any.

siferion
07-18-2006, 05:51 PM
// Member section
var x = xmlDoc.getElementsByTagName('member');
var memberTable = document.getElementById('addMembers')

var tableArray = new Array();
tableArray[0] = document.createElement('TABLE'); // Bard
tableArray[1] = document.createElement('TABLE'); // Beastlord
tableArray[2] = document.createElement('TABLE'); // Berzerker
tableArray[3] = document.createElement('TABLE'); // Cleric
tableArray[4] = document.createElement('TABLE'); // Druid
tableArray[5] = document.createElement('TABLE'); // Enchanter
tableArray[6] = document.createElement('TABLE'); // Magician
tableArray[7] = document.createElement('TABLE'); // Monk
tableArray[8] = document.createElement('TABLE'); // Necromancer
tableArray[9] = document.createElement('TABLE'); // Paladin
tableArray[10] = document.createElement('TABLE'); // Ranger
tableArray[11] = document.createElement('TABLE'); // Rogue
tableArray[12] = document.createElement('TABLE'); // Shadowknight
tableArray[13] = document.createElement('TABLE'); // Shaman
tableArray[14] = document.createElement('TABLE'); // Warrior
tableArray[15] = document.createElement('TABLE'); // Wizard

for (i = 0; i < x.length; i++)
{
var row = document.createElement('TR');
for (j = 0; j < x[i].childNodes.length; j++)
{
if (x[i].childNodes[j].nodeType != 1) continue;
var container = document.createElement('TD');

switch(x[i].childNodes[j].nodeName)
{
case "Magelo":
var theData = document.createElement('P');
theData.innerHTML = "<a target=_new href=http://www.magelo.com/eq_view_profile.html?num=" + x[i].childNodes[j].firstChild.nodeValue + ">Magelo<\/a>";
break;
case "EQPlayers":
var theData = document.createElement('P');
theData.innerHTML = "<a target=_new href=http://eqplayers.station.sony.com/character_profile.vm?characterId=" + x[i].childNodes[j].firstChild.nodeValue + ">EQPlayers<\/a>";
break;
case "Class":
var mClass = x[i].childNodes[j].nodeName;
var theData = document.createTextNode(x[i].childNodes[j].firstChild.nodeValue);
default:
var theData = document.createTextNode(x[i].childNodes[j].firstChild.nodeValue);
}
container.appendChild(theData);
row.appendChild(container);
}
switch(mClass)
{
case "Bard":
tableArray[0].appendChild(row);
break;
case "Beastlord":
tableArray[1].appendChild(row);
break;
case "Berzerker":
tableArray[2].appendChild(row);
break;
case "Cleric":
tableArray[3].appendChild(row);
break;
case "Druid":
tableArray[4].appendChild(row);
break;
case "Enchanter":
tableArray[5].appendChild(row);
break;
case "Magician":
tableArray[6].appendChild(row);
break;
case "Monk":
tableArray[7].appendChild(row);
break;
case "Necromancer":
tableArray[8].appendChild(row);
break;
case "Paladin":
tableArray[9].appendChild(row);
break;
case "Ranger":
tableArray[10].appendChild(row);
break;
case "Rogue":
tableArray[11].appendChild(row);
break;
case "Shadowknight":
tableArray[12].appendChild(row);
break;
case "Shaman":
tableArray[13].appendChild(row);
break;
case "Warrior":
tableArray[14].appendChild(row);
break;
case "Wizard":
tableArray[15].appendChild(row);
}
}

for(i = 0; i < 16; i++)
{
var row = document.createElement('TR');
var cel = document.createElement('TD');

switch(i)
{
case 0:
cel.innerHTML = "Bard";
break;
case 1:
cel.innerHTML = "Beastlord";
break;
case 2:
cel.innerHTML = "Berzerker";
break;
case 3:
cel.innerHTML = "Cleric";
break;
case 4:
cel.innerHTML = "Druid";
break;
case 5:
cel.innerHTML = "Enchanter";
break;
case 6:
cel.innerHTML = "Magician";
break;
case 7:
cel.innerHTML = "Monk";
break;
case 8:
cel.innerHTML = "Necromancer";
break;
case 9:
cel.innerHTML = "Paladin";
break;
case 10:
cel.innerHTML = "Ranger";
break;
case 11:
cel.innerHTML = "Rogue";
break;
case 12:
cel.innerHTML = "Shadowknight";
break;
case 13:
cel.innerHTML = "Shaman";
break;
case 14:
cel.innerHTML = "Warrior";
break;
case 15:
cel.innerHTML = "Wizard";
break;
}
row.appendChild(cel);
memberTable.appendChild(row);
memberTable.appendChild(tableArray[i]);
}

Kor
07-21-2006, 01:06 PM
You miss the tbody element. Rows must be appended the the tbody, not to the table. tbody is required in javascript. Create a tbody element as well, and append the rows to it.

siferion
07-25-2006, 07:50 PM
Yeah, i changed it to use TBODYs instad of tables and also found the problem in the code itself. The problem that was breaking it wasn't that it didn't have a tbody, it still works without them, just that the class handler wasn't picking up classes from the xml stream properly.

Kor
07-25-2006, 08:50 PM
... i am glad that u have solved the problem. Anyway, keep in mind that TBODY affair :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum