[SOLUCIONADO] Cambiar el color de un td con DOM

dglypho · #1 (**permalink**) 28/11/2014, 05:50

Hola a todos, hace unos días inicie un tema para que alguien me ayudara a crear una tabla con JavaScript, bien pues eso ya lo conseguí. Ahora lo que necesito es que las celdas de esa tabla cambien de color al hacer click sobre ellas, pero no me funciona.

Este es mi código HTML:

Código HTML:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src="js/funciones.js"></script>
</head>
<body onload="crearTabla()">
	<header></header>
	<article>
		<section id="butaca">
			<p id="numsala"></p>
			<p id="titulo"></p>
			<table id="tabla" onclick="funcionTabla()"></table>
		</section>
	</article>
</body>
</html>

Y este es mi JavaScript

Código Javascript:

Ver originalvar columna=new Array();
columna[0]=1;
columna[1]=2;
columna[2]=3;
columna[3]=4;
columna[4]=5;
columna[5]=6;
var filas=new Array();
filas[0]=1;
filas[1]=2;
filas[2]=3;
filas[3]=4;
filas[4]=5;
var tabla=new Array();
tabla[0]=columna;
tabla[1]=filas;
 
function crearTabla(){
    var tbl = document.getElementById("tabla");
    var tblBody = document.createElement("tbody");
    for (var i = 0; i < columna.length; i++) {
        var fila = document.createElement("tr");
        for (var j = 0; j < filas.length; j++) {
            var celda = document.createElement("td");
            var textoCelda = document.createTextNode(i+"-"+j);
            celda.appendChild(textoCelda);
            fila.appendChild(celda);
        }
        tblBody.appendChild(fila);
    }
    tbl.appendChild(tblBody);
    tbl.setAttribute("border", "2");
}
 
function funcionTabla(){
    var td=document.getElementsByTagName('td');
    td.addEventListener('click',cambiaColor,false);
}
 
function cambiaColor(e){
    var asiento=e.target;
    if(asiento.style.background=='green'){
        asiento.style.background='orange';
    }
    else{
        asiento.style.background='green';
    }
}

El error me da en la función funcionTabla(), más concretamente en la segunda línea de la función. Por que me da este error y a que se debe y que posible solución puedo hacer.
Muchas gracias por la ayuda

GeekGirl · #2 (**permalink**) 28/11/2014, 06:44

Estás intentando levantar las celdas antes de que sean cargadas por el DOM. Podés hacer algo mucho más sintético dejando tu JS de la siguiente manera:

Código Javascript:

Ver originalvar columna=new Array();
columna[0]=1;
columna[1]=2;
columna[2]=3;
columna[3]=4;
columna[4]=5;
columna[5]=6;
var filas=new Array();
filas[0]=1;
filas[1]=2;
filas[2]=3;
filas[3]=4;
filas[4]=5;
var tabla=new Array();
tabla[0]=columna;
tabla[1]=filas;
         
function crearTabla(){
    var tbl = document.getElementById("tabla");
    var tblBody = document.createElement("tbody");
    for (var i = 0; i < columna.length; i++) {
        var fila = document.createElement("tr");
        for (var j = 0; j < filas.length; j++) {
            var celda = document.createElement("td");
 
            celda.onclick = function(){
                if(this.style.background=='green'){
                    this.style.background='orange';
                }else{
                    this.style.background='green';
                } 
            }
 
            var textoCelda = document.createTextNode(i+"-"+j);
            celda.appendChild(textoCelda);
            fila.appendChild(celda);
        }
        tblBody.appendChild(fila);
    }
    tbl.appendChild(tblBody);
    tbl.setAttribute("border", "2");
}

Y eliminando el llamado a functionTabla del click en tu tabla (valga la redundancia):

Código HTML:

<table id="tabla" onclick="funcionTabla()"></table> <!-- Elimina el llamado -->

<table id="tabla"></table> <!-- Que quede así -->

Saludos :)

dglypho · #3 (**permalink**) 28/11/2014, 12:24

Vale muchas gracias por tu ayuda, ya me funciona. Y ahora una pregunta por curiosidad. ¿Si quisiese que al pulsar una celda me apareciese un div oculto lo debería meter hay o en otro sitio:

Código Javascript:

Ver originalcelda.onclick=function(){
        div.style.display='block';
    if(this.style.background=='green'){
        this.style.background='orange';
    }
    else{
        this.style.background='green';
    }
}

GeekGirl · #4 (**permalink**) 28/11/2014, 13:25

Sí. Exactamente ahí. En ese caso va a mostrar el div cuando hagas click en cualquier celda.

dglypho · #5 (**permalink**) 29/11/2014, 04:43

Perfecto, muchas gracias eso es lo que quería hacer más o menos