Tema: Tabla dinámica y contenido de celda: No devuelve el dato
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 28/11/2012, 07:19
lDSxKO
 
Fecha de Ingreso: noviembre-2012
Mensajes: 4
Antigüedad: 12 años
Puntos: 0
Respuesta: Tabla dinámica y contenido de celda: No devuelve el dato
Tienes razón, pensé que reducir el código todo lo posible ayudaría a quien me quisiera ayudar, pero de esa forma no sucede todo tal como en el proyecto en desarrollo

Lo vuelvo a poner, ahora solo he omitido el CSS. El código... obviamente se trata de intentar hacer un calendario. Sé que hay por ahí para usar gratuitamente pero quiero hacerlo yo, aunque sea con ayuda

No descarto que el problema este en un fallo de concepto por mi parte

Yo el código lo pruebo con firefox 16.02. Como no es un proyecto profesional no tengo especial interés en la compatibilidad con todos los navegadores

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="refresh" content="50" />
  5.         <meta charset="UTF-8">
  6.         <title></title>
  7.         <script type="text/javascript" src="calendario.js"></script>
  8.     </head>
  9.     <body onload="body_load()">
  10.         <header>
  11.             
  12.         </header>
  13.         <div id="calendario">
  14.             <div id="calendario_alineacion">
  15.                 <table id="calendario_tabla">
  16.                     <thead>
  17.                         <tr>
  18.                             <th>Lunes</th>
  19.                             <th>Martes</th>
  20.                             <th>Mi&eacute;rcoles</th>
  21.                             <th>Jueves</th>
  22.                             <th>Viernes</th>
  23.                             <th>S&aacute;bado</th>
  24.                             <th>Domingo</th>
  25.                         </tr>
  26.                     </thead>
  27.                     <tbody>
  28.                     <tbody>
  29.                 </table>
  30.             </div>
  31.         </div>
  32.     </body>
  33. </html>

Código Javascript: 
Ver original
  1. var fechaHoy = new Date();
  2. var fOp = new Date(); //fecha operativa
  3.  
  4. /**
  5.  * Devuelve el nº de días que tiene un mes.
  6.  */
  7. function dem(mes,anio) {
  8.     return new Date(anio, mes, 0).getDate(); 
  9. } 
  10. /**
  11.  * Devuelve el primer día del mes en formato número.
  12.  * 0 = Lunes. 2=Martes.... 5=Sábado, 6=Domingo
  13.  */
  14. function pddm(mes,anio){
  15.     return (new Date(anio,mes).getDay() + 6)%7;
  16. }
  17. /**
  18.  * La tabla en si misma ya debe existir. Lo que hace
  19.  * esta función es añadir las filas y las columnas,
  20.  * calculando primero cuantas filas se requieren, pues
  21.  * habrá meses que necesiten más que otros.
  22.  * También escribe el contenido de las celdas, es decir,
  23.  * los días del mes en su posición correspondiente.
  24.  */
  25. function crea_tabla(){
  26.     //
  27.     var nfnec=6; //numero de filas necesarias (Falta calcularlos)
  28.     //
  29.     //crear las filas y las celdas dentro del tbody de la tabla e introducir dias
  30.     var cdias = 1; //contador de dias
  31.     var tblBody = document.getElementById("calendario_tabla").getElementsByTagName("tbody")[0];
  32.     
  33.     for (var f=0;f<nfnec;f++) {
  34.         var fila = document.createElement("tr");
  35.         
  36.         for (var c=0;c<7;c++) {
  37.             var celda = document.createElement("td");
  38.             var ind=true; //Habrá celdas vacías que no deben lanzar eventos
  39.             var textoCelda;
  40.             //estilo remarcado para el día de hoy
  41.             if (fechaHoy.getDate() == cdias) {
  42.                 celda.setAttribute("id","hoy");
  43.             }
  44.             
  45.             if (f==0) {
  46.                 if (c >= pddm(fOp.getMonth(),fOp.getFullYear())) { 
  47.                     //se empiezan a escribir los días
  48.                     textoCelda = document.createTextNode(cdias);
  49.                     cdias++;
  50.                 } else {
  51.                     textoCelda = document.createTextNode(" ");
  52.                     ind=false;
  53.                 }
  54.             } else{
  55.                 if (f>0 && cdias<dem(fOp.getMonth(),fOp.getFullYear())) {
  56.                     textoCelda = document.createTextNode(cdias);
  57.                     cdias++;
  58.                 } else {
  59.                     textoCelda = document.createTextNode(" ");
  60.                     ind=false;
  61.                 }
  62.             }
  63.             celda.appendChild(textoCelda);
  64.             celda.setAttribute("class","calendario_celda");
  65.             fila.appendChild(celda);
  66.             if (ind) {              
  67.                 celda.addEventListener("click",function(){celda_click(celda.textContent);},false);
  68.             }
  69.         }
  70.         tblBody.appendChild(fila);
  71.     }   
  72. }
  73. function celda_click(str){
  74.     alert("Evento"+str);
  75. }
  76. function body_load(){
  77. crea_tabla();
  78. }

Y bueno, lo dicho, toda ayuda se agradece