Tabla dinámica y contenido de celda: No devuelve el dato

lDSxKO · #1 (**permalink**) 27/11/2012, 11:48

Hola, soy nuevo y empiezo solicitando ayuda, pero no me enrollo y voy al grano:
(El código lo he simplificado lo más que he podido)

Código HTML:

<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<table id="MiTabla" onload="crea_tabla()">
 <tbody></tbody>
 </table>
</body>
</html>

Código Javascript:

Ver originalfunction crea_tabla(){
        var n=5;//filas
        var n2=4;//columnas
    var tblBody = document.getElementById("MiTabla").getElementsByTagName("tbody")[0];
    for (var f=0;f<n;f++) {
        var fila = document.createElement("tr");
        for (var c=0;c<n2;c++) {
            var celda = document.createElement("td");
            var textoCelda;
            textoCelda = document.createTextNode("Texto de ejemplo (en la versión final varía según la celda, en función de condiciones y demás)");
                         //trozo problemático de código
            celda.addEventListener("click",function(){celda_click(celda.textContent);},false);
                        //resto de código  
            celda.appendChild(textoCelda);
            fila.appendChild(celda);
        }
        tblBody.appendChild(fila);
    }   
}
function celda_click(str){
    alert("Evento"+str);
}

Creo una tabla dinámicamente e intento obtener su contenido al hacer click, creando un evento que llama a celda_click en cada celda.
El evento se lanza pero no consigo que se envíe como parámetro el contenido de la celda, el texto. Si hago:

Código Javascript:

Ver originalcelda.addEventListener("click",function(){celda_click("Texto de prueba");},false);

Puedo comprobar que el "Texto de prueba" sí se manda ya que al hacer click se muestra la alerta "EventoTexto de prueba".
Incluso si antes de crear el eventListener ejecuto un "alert(celda.textContent)" me muestra bien el dato, algo se me escapa ya que no entiendo por qué al hacer click no funciona.

Si alguién tiene algo que me pueda ayudar, aunque sea otra forma de hacer lo que busco... pues se lo agradezco

emprear · #2 (**permalink**) 27/11/2012, 12:25

Me pregunto como hiciste para verificar un evento agregado a un nodo que ni siquiera se genera.
mientras intentes crear la tabla desde un onload en la misma tabla , no se va a generar nada

<body onload="crea_tabla()">

en todo caso

lDSxKO · #3 (**permalink**) 27/11/2012, 13:36

Gracias por responder emprear. Pero el tema no es ese, el código que he puesto aquí está simplificado, en mi proyecto funciona bien y sí, está en el body onload, aunque no directamente.

La cuestión es que genero bien la tabla, y se crean eventos en cada celda, pero no logro que dicho evento obtenga el contenido de la celda.

emprear · #4 (**permalink**) 27/11/2012, 16:27

entonces sería oportuno que publiques el código sobre el cual se trabaja y no sobre el que no, que aqui no venimos (bueno, al menos yo) a perder el tiempo

lDSxKO · #5 (**permalink**) 28/11/2012, 07:19

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<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="refresh" content="50" />
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="calendario.js"></script>
    </head>
    <body onload="body_load()">
        <header>
            
        </header>
        <div id="calendario">
            <div id="calendario_alineacion">
                <table id="calendario_tabla">
                    <thead>
                        <tr>
                            <th>Lunes</th>
                            <th>Martes</th>
                            <th>Mi&eacute;rcoles</th>
                            <th>Jueves</th>
                            <th>Viernes</th>
                            <th>S&aacute;bado</th>
                            <th>Domingo</th>
                        </tr>
                    </thead>
                    <tbody>
                    <tbody>
                </table>
            </div>
        </div>
    </body>
</html>

Código Javascript:

Ver originalvar fechaHoy = new Date();
var fOp = new Date(); //fecha operativa
 
/**
 * Devuelve el nº de días que tiene un mes.
 */
function dem(mes,anio) {
    return new Date(anio, mes, 0).getDate(); 
} 
/**
 * Devuelve el primer día del mes en formato número.
 * 0 = Lunes. 2=Martes.... 5=Sábado, 6=Domingo
 */
function pddm(mes,anio){
    return (new Date(anio,mes).getDay() + 6)%7;
}
/**
 * La tabla en si misma ya debe existir. Lo que hace
 * esta función es añadir las filas y las columnas,
 * calculando primero cuantas filas se requieren, pues
 * habrá meses que necesiten más que otros.
 * También escribe el contenido de las celdas, es decir,
 * los días del mes en su posición correspondiente.
 */
function crea_tabla(){
    //
    var nfnec=6; //numero de filas necesarias (Falta calcularlos)
    //
    //crear las filas y las celdas dentro del tbody de la tabla e introducir dias
    var cdias = 1; //contador de dias
    var tblBody = document.getElementById("calendario_tabla").getElementsByTagName("tbody")[0];
    
    for (var f=0;f<nfnec;f++) {
        var fila = document.createElement("tr");
        
        for (var c=0;c<7;c++) {
            var celda = document.createElement("td");
            var ind=true; //Habrá celdas vacías que no deben lanzar eventos
            var textoCelda;
            //estilo remarcado para el día de hoy
            if (fechaHoy.getDate() == cdias) {
                celda.setAttribute("id","hoy");
            }
            
            if (f==0) {
                if (c >= pddm(fOp.getMonth(),fOp.getFullYear())) { 
                    //se empiezan a escribir los días
                    textoCelda = document.createTextNode(cdias);
                    cdias++;
                } else {
                    textoCelda = document.createTextNode(" ");
                    ind=false;
                }
            } else{
                if (f>0 && cdias<dem(fOp.getMonth(),fOp.getFullYear())) {
                    textoCelda = document.createTextNode(cdias);
                    cdias++;
                } else {
                    textoCelda = document.createTextNode(" ");
                    ind=false;
                }
            }
            celda.appendChild(textoCelda);
            celda.setAttribute("class","calendario_celda");
            fila.appendChild(celda);
            if (ind) {              
                celda.addEventListener("click",function(){celda_click(celda.textContent);},false);
            }
        }
        tblBody.appendChild(fila);
    }   
}
function celda_click(str){
    alert("Evento"+str);
}
function body_load(){
crea_tabla();
}

Y bueno, lo dicho, toda ayuda se agradece

zerokilled · #6 (**permalink**) 28/11/2012, 12:25

buenas,
si bien cada celda ya tiene su handler (evento), el problema es la referencia a la celda dentro del handler.

Código:

 celda.addEventListener("click",function(){celda_click(celda.textContent);},false);

aquí celda siempre hace referencia al mismo elemento en todos los handlers. en este caso, al último elemento creado. puedes intentar cambiando celda por this para hacer referencia al propio elemento.

lDSxKO · #7 (**permalink**) 28/11/2012, 13:12

Cita:

Iniciado por zerokilled

buenas,
si bien cada celda ya tiene su handler (evento), el problema es la referencia a la celda dentro del handler.

Código:

 celda.addEventListener("click",function(){celda_click(celda.textContent);},false);

aquí celda siempre hace referencia al mismo elemento en todos los handlers. en este caso, al último elemento creado. puedes intentar cambiando celda por this para hacer referencia al propio elemento.

Gracias zero. Como en cada bucle creaba la variable celda pense que al crear el evento quedaría grabada la referencia especifica de esa iteración del bucle...
Cambiando "celda" por "this" como me has recomendado ha funcionado tal y como yo quería. Muchas gracias.