Creacion de tabla compleja javascript

[esnar1]

Estoy intentado crear una tabla de ejercicios para gimnasio y para ello he creado un objeto tabla en el cual en su interior van los grupos y ejercicios. Es un poco lio por que es un array tridimensional. Tenemos.

function tabla1() {
this.nombre;
this.dias = [];
}

function dia() {
this.grupos = [];
}

function grupo() {
this.nombre;
this.ejercicios = [];
}

function ejercicio() {
this.nombre;
}


var tabla= new tabla1();


Supongamos que tenemos un tabla con 2 dias, 2 grupos y 2 ejercicios por grupo, puesto para que se entienda mejor, el 2 no es el indice sino la longitud:

tabla.dias[2].grupos[2].ejercicios[2].

quiero crear la siguiente tabla:


y tengo la siguiente funcion:


function crearTabla() {




var table = document.createElement("table");
table.setAttribute("class", "normal");
var thead = document.createElement("thead");
thead.innerHTML = "<tr><td colspan='2'></td><td>EJERCICIO</td><td>IMAGEN</td><td>SERIES</td><td>REPETICIONES</td><td>NOTAS</td>";
table.appendChild(thead);
var tbody = document.createElement("tbody");

for (var i = 0; i < tabla.dias.length; i++) {
var ejerciciosDia = 0;
for (var h = 0; h < tabla.dias[i].grupos.length; h++) {
//numero ejercicios en un grupo: tabla.dias[i].grupos[j].ejercicios.length;
ejerciciosDia += tabla.dias[i].grupos[h].ejercicios.length;
}

//aqui numero de ejercicios en un dia en la variable dia.
var trDia = document.createElement("tr");
var tdDia = document.createElement("td");
tdDia.setAttribute("rowspan", ejerciciosDia*2);
tdDia.innerHTML = "DIA " + (i + 1);
trDia.appendChild(tdDia);

for (var j = 0; j < tabla.dias[i].grupos.length; j++) {
var ejerciciosGrupo=tabla.dias[i].grupos[j].ejercicios.length;
var tdGrupo = document.createElement("td");
tdGrupo.setAttribute("rowspan", ejerciciosGrupo*2);
tdGrupo.innerHTML = tabla.dias[i].grupos[j].nombre;
trDia.appendChild(tdGrupo);

for (var k = 0; k < tabla.dias[i].grupos[j].ejercicios.length; k++) {
var tdTitulo = document.createElement("td");
var tdImagen = document.createElement("td");
var tdSeries = document.createElement("td");
var tdRepeticiones = document.createElement("td");
var tdNotas = document.createElement("td");

tdTitulo.innerHTML = tabla.dias[i].grupos[j].ejercicios[k].nombre;
tdImagen.setAttribute("rowspan", "2");
tdSeries.setAttribute("rowspan", "2");
tdRepeticiones.setAttribute("rowspan", "2");
tdNotas.setAttribute("rowspan", "2");

trDia.appendChild(tdTitulo);
trDia.appendChild(tdImagen);
trDia.appendChild(tdSeries);
trDia.appendChild(tdRepeticiones);
trDia.appendChild(tdNotas);

tbody.appendChild(trDia);

for (var l = k; l < k+1; l++) {
var trVacio = document.createElement("tr");
var tdVacio = document.createElement("td");
trVacio.appendChild(tdVacio);
tbody.appendChild(trVacio);
table.appendChild(tbody);
divTabla.appendChild(table);
}
}
}

}


No entiendo por que me sale esto...:


Por mas que veo el codigo creo que esta mas o menos bien, o al menos que deberia salir como quiero, pero nada, por mas que pruebo cosas y cambio otras me sigue saliendo igual...

Que opinais? Gracias compañeros


CODIGO EN PASTEBIN DE JAVASCRIPT DE LA CREACION DE TABLA: [URL="http://pastebin.com/MdM2PTXE"]http://pastebin.com/MdM2PTXE[/URL]
CODIGO EN PASTEBIN DE HTML DE LAS TABLAS: [URL="http://pastebin.com/8ee5TPvj"]http://pastebin.com/8ee5TPvj[/URL]