I am building a table dynamically, this I have done in other modules of my page exactly the same, but this time I am generating that error and I do not know why, on the page I have another table that I assemble almost the the same way, the only thing that changes are the data and this does not generate me an error, I do not know what it can be, I'll leave you a screenshot so you can see what error appears:
As you can see the table above does not take the style and is damaged, besides that it does not take the sorting, and it is because something is wrong in the code or I do not know.
I already checked the code I use but I do not find an error or something: /
Look, the code I use is this, as I said, I dynamically arm it, for that I go through two arrays and I'm putting together the HTML:
function ArmarTabla() {
$("#container_TGrid_Arrastre").html("");
$("#container_TGrid_Arrastre").css("display", "none"); //Div que contiene tabla para arrastre
var html_Arrastre = "";
html_Arrastre = "<table id='T_Arrastre' border='1' cellpadding='1' cellspacing='1' style='width: 100%'><thead> ";
html_Arrastre = html_Arrastre + "<tr id='Arrastre_Cabecera_A'><th class='Grid_Head' rowspan='3'>Día</th><th class='Grid_Head' colspan='8'>Horario</th><th class='Grid_Head' rowspan='3'>Acción</th></tr> "; //Armamos las cabeceras fijas
html_Arrastre = html_Arrastre + "<tr id='Arrastre_Cabecera_A_B'><th class='Grid_Head' colspan='2'>A</th><th class='Grid_Head' colspan='2'>B</th><th class='Grid_Head' colspan='2'>C</th><th class='Grid_Head' colspan='2'>D</th></tr> "
html_Arrastre = html_Arrastre + "<tr id='Arrastre_Cabecera_B'><th class='Grid_Head'>Inicial</th><th class='Grid_Head'>Final</th><th class='Grid_Head'>Inicial</th><th class='Grid_Head'>Final</th><th class='Grid_Head'>Inicial</th><th class='Grid_Head'>Final</th><th class='Grid_Head'>Inicial</th><th class='Grid_Head'>Final</th></tr> "; //Armamos las cabeceras fijas
html_Arrastre = html_Arrastre + "</thead><tbody> "
for (var i in MatrizArrastre) {
html_Arrastre = html_Arrastre + "<tr id='ArrastreDay_" + MatrizArrastre[i].DayName + "'>"; //ID del TR
for (var j in ArrayDayWork) { //Recorremos el array que contiene los días laborales y los que no
if (MatrizArrastre[i].Dia == ArrayDayWork[j][0]) {
if (ArrayDayWork[j][2] == false) { //SI ese día no es laboral colocamos en ROJO
html_Arrastre = html_Arrastre + "<td><span class='cssToolTip_Form'><b style='color: #6B1010; cursor: pointer; cursor: hand;'>" + MatrizArrastre[i].DayName + "</b><span>Día no Laboral</span></span></td>"; //Armamos la identificación del Día
html_Arrastre = html_Arrastre + "<td> - </td><td> - </td><td> - </td><td> - </td><td> - </td><td> - </td><td> - </td><td> - </td><td> - </td></tr>"; //Colocamos los horarios
break;
} else if (ArrayDayWork[j][2] == true) { //Si ese día si es laboral pintamos normal
html_Arrastre = html_Arrastre + "<td>" + MatrizArrastre[i].DayName + "</td>"; //Armamos la identificación del Día
html_Arrastre = html_Arrastre + "<td style='cursor: pointer; cursor: hand;'><span class='cssToolTip_Boton'>" + MatrizArrastre[i].A_HoraIni + "<span><input type='radio' class='Ver' name='option' style='cursor: pointer; cursor: hand;' onclick=\"EditHoraDia('" + MatrizArrastre[i].ID + "', 'A');\">Editar<br><input type='radio' class='Ver' name='option' style='cursor: pointer; cursor: hand;' onclick=\"DeleteHoraDia('" + MatrizArrastre[i].ID + "','A');\">Eliminar</span></span></td><td>" + MatrizArrastre[i].A_HoraFin + "</td><td style='cursor: pointer; cursor: hand;'><span class='cssToolTip_Boton'>" + MatrizArrastre[i].B_HoraIni + "<span><input type='radio' class='Ver' name='option' style='cursor: pointer; cursor: hand;' onclick=\"EditHoraDia('" + MatrizArrastre[i].ID + "', 'B');\">Editar<br><input type='radio' class='Ver' name='option' style='cursor: pointer; cursor: hand;' onclick=\"DeleteHoraDia('" + MatrizArrastre[i].ID + "','B');\">Eliminar</span></span></td><td>" + MatrizArrastre[i].B_HoraFin + "</td><td style='cursor: pointer; cursor: hand;'><span class='cssToolTip_Boton'>" + MatrizArrastre[i].C_HoraIni + "<span><input type='radio' class='Ver' name='option' style='cursor: pointer; cursor: hand;' onclick=\"EditHoraDia('" + MatrizArrastre[i].ID + "', 'C');\">Editar<br><input type='radio' class='Ver' name='option' style='cursor: pointer; cursor: hand;' onclick=\"DeleteHoraDia('" + MatrizArrastre[i].ID + "','C');\">Eliminar</span></span></td><td>" + MatrizArrastre[i].C_HoraFin + "</td><td style='cursor: pointer; cursor: hand;'><span class='cssToolTip_Boton'>" + MatrizArrastre[i].D_HoraIni + "<span><input type='radio' class='Ver' name='option' style='cursor: pointer; cursor: hand;' onclick=\"EditHoraDia('" + MatrizArrastre[i].ID + "', 'D');\">Editar<br><input type='radio' class='Ver' name='option' style='cursor: pointer; cursor: hand;' onclick=\"DeleteHoraDia('" + MatrizArrastre[i].ID + "','D');\">Eliminar</span></span></td><td>" + MatrizArrastre[i].D_HoraFin + "</td><td> - </td></tr>"; //Colocamos los horarios
break;
}
}
}
}
html_Arrastre = html_Arrastre + "</tbody></table>";//Cerramos tabla principal
$("#container_TGrid_Arrastre").html(html_Arrastre);
$("#container_TGrid_Arrastre").css("display", "inline-table"); //Div que contiene tabla para arrastre
//$("#T_Arrastre").dataTable({
// "bJQueryUI": true,
// "iDisplayLength": 15,
// "bDestroy": true,
// "aoColumnDefs": [
// { 'bSortable': false, 'aTargets': [0, 1, 2, 3, 4, 5, 6, 7, 8] }
// ]
//});
$("#T_Arrastre").dataTable({
"bJQueryUI": true, "iDisplayLength": 1000,
"bDestroy": true
});
}<div id="container_TGrid_Arrastre" style="width: 900px; overflow: auto; border: solid 1px #CACACA; font: 12px/20px CenturyGothic,sans-serif; text-align: center; margin-top: 5px;">
</div>They will see that there is a commented line, that is how the table is supposed to be armed, so I want it, but it does not take any style, and always throws an error.
The matrices I use are these:
//Matriz de arrastre
var MatrizArrastre = [];
MatrizArrastre[0] = {
A_HoraFin: "0",
A_HoraIni: "0",
B_HoraFin: "0",
B_HoraIni: "0",
C_HoraFin: "0",
C_HoraIni: "0",
D_HoraFin: "0",
D_HoraIni: "0",
DayName: "Lunes",
Dia: 1
};
MatrizArrastre[1] = {
A_HoraFin: "0",
A_HoraIni: "0",
B_HoraFin: "0",
B_HoraIni: "0",
C_HoraFin: "0",
C_HoraIni: "0",
D_HoraFin: "0",
D_HoraIni: "0",
DayName: "Martes",
Dia: 2
};
MatrizArrastre[2] = {
A_HoraFin: "0",
A_HoraIni: "0",
B_HoraFin: "0",
B_HoraIni: "0",
C_HoraFin: "0",
C_HoraIni: "0",
D_HoraFin: "0",
D_HoraIni: "0",
DayName: "Miércoles",
Dia: 3
};
MatrizArrastre[3] = {
A_HoraFin: "0",
A_HoraIni: "0",
B_HoraFin: "0",
B_HoraIni: "0",
C_HoraFin: "0",
C_HoraIni: "0",
D_HoraFin: "0",
D_HoraIni: "0",
DayName: "Jueves",
Dia: 4
};
MatrizArrastre[4] = {
A_HoraFin: "0",
A_HoraIni: "0",
B_HoraFin: "0",
B_HoraIni: "0",
C_HoraFin: "0",
C_HoraIni: "0",
D_HoraFin: "0",
D_HoraIni: "0",
DayName: "Viernes",
Dia: 5
};
MatrizArrastre[5] = {
A_HoraFin: "0",
A_HoraIni: "0",
B_HoraFin: "0",
B_HoraIni: "0",
C_HoraFin: "0",
C_HoraIni: "0",
D_HoraFin: "0",
D_HoraIni: "0",
DayName: "Sábado",
Dia: 6
};
MatrizArrastre[6] = {
A_HoraFin: "0",
A_HoraIni: "0",
B_HoraFin: "0",
B_HoraIni: "0",
C_HoraFin: "0",
C_HoraIni: "0",
D_HoraFin: "0",
D_HoraIni: "0",
DayName: "Domingo",
Dia: 7
};
