Hola a todos, siguiendo con otros dos temas que tengo en este foro:
http://www.forosdelweb.com/f13/cambiar-color-td-con-dom-1114860/
http://www.forosdelweb.com/f13/crear-tabla-con-javascript-1114397/
En los que para resumir un poco tenía que crear una tabla con JavaScript y cambiar el color de una celda al pulsarla. Ahora bien lo que quiero hacer es que cuando pulse un botón las celdas que haya pulsado cambien de color y me aparezca un contador de cuantas de estas casillas hay pulsadas. Bien hasta ahora mi código HTML es el siguiente que de momento no me esta dando ningún problema:
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"></table>
<div id="reservar">
<p>Cuantos con precio reducido</p>
<input type="text"><br>
<button id="comprar">Comprar</button>
</div>
</section>
</article>
</body>
</html> Y este es mi JavaScript al que le he añadido un evento para que me cambie de color al pulsar el botón:
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(){
var div=document.getElementById("reservar");
div.style.display='block';
var compra=document.getElementById("comprar");
compra.onclick=function(){
if(celda.style.background=='orange'){
celda.style.background='red';
}
}
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");
}
El caso es que lo he intentado hacer de esta otra forma y no me funciona tampoco:
Código Javascript
:
Ver originalvar compra=document.getElementById("comprar");
celda.onclick=function(){
var div=document.getElementById("reservar");
div.style.display='block';
if(this.style.background=='green'){
this.style.background='orange';
}
else{
this.style.background='green';
}
}
compra.onclick=function(){
if(celda.style.background=='orange'){
celda.style.background='red';
}
}
¿Que solución puede tener este problema?