hola illicist, vi tu post y me hiciste acordar que yo tengo algo parecido a lo que vos queres, solo que lo hice hace unos años y no tenía mucho conocimiento de javascript y de PHP, por lo cual no esta del todo terminado debido a que no dispongo de tiempo para ello. Lo que si funciona bien es lo que necesitas vos, o sea lo de mostrar las butacas vacías u ocupadas.
si te interesa aquí te pongo el codigo, solo tenes que crear una imágen de una butaca 40x04 y guardarla como "butaca.gif" y la otra es para el botón de cancelar de 40x12 y guardarla como "no_venta.gif"
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.v9rojo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
color: #FF0000;
text-decoration: none;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.v14bordo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #660000;
text-decoration: none;
}
.v10negro {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
text-decoration: none;
}
-->
</style>
</head>
<script language="javascript">
function vender(fila,columna){
num_butaca=fila+"_"+columna;
document.getElementById(num_butaca).innerHTML='vendido<br /><a href="javascript:cancelVta('+fila+','+columna+')"><img src="no_venta.gif" border="0"></a>';
document.getElementById('inpt_hidden').innerHTML+='<input type="text" name="inpt_'+num_butaca+'" value="'+num_butaca+'">';
document.getElementById('libres').innerHTML-=1;
}
function cancelVta(fila,columna){
var elemento = new String();
num_b=fila+"_"+columna;
document.getElementById(num_b).innerHTML='<a href="javascript:vender('+fila+','+columna+')"><img src="butaca.gif" border="0"></a>';
elemento=document.getElementById('inpt_hidden').innerHTML;
document.getElementById('inpt_hidden').innerHTML=elemento.replace('<INPUT value='+fila+'_'+columna+' name=inpt_'+fila+'_'+columna+'>','');
var disponibles=new Number(document.getElementById('libres').innerHTML);
document.getElementById('libres').innerHTML=disponibles+1;
}
function mueveReloj(){
momentoActual = new Date()
hora = momentoActual.getHours()
minuto = momentoActual.getMinutes()
segundo = momentoActual.getSeconds()
horaImprimible = hora + ":" + minuto + ":" + segundo
document.getElementById('hora_actual').innerHTML = horaImprimible
switch (horaImprimible){
case "1:19:0":
h_1.style.backgroundColor="#EEEEEE";
document.getElementById('f_1').innerHTML='func. actual';
break;
case "1:19:10":
h_1.style.backgroundColor="#FFFFFF";
h_2.style.backgroundColor="#EEEEEE";
document.getElementById('f_1').innerHTML=' ';
document.getElementById('f_2').innerHTML='func. actual';
break;
case "1:19:20":
h_2.style.backgroundColor="#FFFFFF";
h_3.style.backgroundColor="#EEEEEE";
document.getElementById('f_2').innerHTML=' ';
document.getElementById('f_3').innerHTML='func. actual';
break;
case "1:19:30":
h_3.style.backgroundColor="#FFFFFF";
h_4.style.backgroundColor="#EEEEEE";
document.getElementById('f_3').innerHTML=' ';
document.getElementById('f_4').innerHTML='func. actual';
break;
case "1:19:40":
h_4.style.backgroundColor="#FFFFFF";
h_5.style.backgroundColor="#EEEEEE";
document.getElementById('f_4').innerHTML=' ';
document.getElementById('f_5').innerHTML='func. actual';
break;
case "1:19:50":
h_5.style.backgroundColor="#FFFFFF";
h_6.style.backgroundColor="#EEEEEE";
document.getElementById('f_5').innerHTML=' ';
document.getElementById('f_6').innerHTML='func. actual';
break;
case "1:20:0":
h_6.style.backgroundColor="#FFFFFF";
h_7.style.backgroundColor="#EEEEEE";
document.getElementById('f_6').innerHTML=' ';
document.getElementById('f_7').innerHTML='func. actual';
break;
case "1:20:10":
h_7.style.backgroundColor="#FFFFFF";
h_8.style.backgroundColor="#EEEEEE";
document.getElementById('f_7').innerHTML=' ';
document.getElementById('f_8').innerHTML='func. actual';
break;
}
setTimeout("mueveReloj()",1000);
}
</script>
<body onLoad="mueveReloj()">
<?php
$link=mysql_connect("localhost","root","") or die (mysql_error());
mysql_select_db("cine",$link);
if($_POST["Submit"]){
foreach($_POST as $valor){
$sql="UPDATE butacas set estado=1 WHERE num_butaca='$valor'";
mysql_query($sql,$link);
}
}
if($_POST["Submit2"]){
$sql="UPDATE butacas set estado=0 WHERE estado=1";
mysql_query($sql,$link);
}
?>
<table width="400" border="0" align="center" cellpadding="0" cellspacing="0"><form name="form1" method="post" action="<?php echo $PHP_SELF;?>?enviado=ok" target="_self">
<tr>
<td id="inpt_hidden"></td>
</tr>
<tr>
<td>
<input type="submit" name="Submit" value="Cargar"></td>
</tr>
<tr>
<td> </td>
</tr>
</form>
</table>
<table width="445" border="0" align="center" cellpadding="0" cellspacing="0" class="v9rojo">
<tr>
<td height="30" colspan="20" class="v14bordo">Sala 1</td>
</tr>
<?php
$sql="SELECT num_butaca,estado FROM butacas";
$rs=mysql_query($sql,$link);
$total=mysql_num_rows($rs);
$i=1;
$libres=0;
$blank_row='
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>';
while($row=mysql_fetch_array($rs)){
$row_col=explode("_",$row["num_butaca"]);
$num_row=reset($row_col);
$num_col=end($row_col);
if($i==1){echo '<tr>';}
if($row["estado"]==0){
$cont_row='<a href="javascript:vender('.$num_row.','.$num_col.')"><img src="butaca.gif" width="40" height="40" border="0"></a>';
$libres+=1;
}else{
$cont_row='vendido';
}
?>
<td width="40" height="40" id="<?php echo $row["num_butaca"]; ?>"><?php echo $cont_row; ?></td>
<?php
if($i<10){ echo '<td width="5"> </td>';}
if($i==10){ echo '</tr>'.$blank_row; $i=0;}
$i++;
}
?>
</table>
<table width="400" border="0" align="center" cellpadding="0" cellspacing="0" class="v10negro"><form name="form2" method="post" action="<?php echo $PHP_SELF;?>" target="_self">
<tr>
<td>Localidades Total: </td>
<td><?php echo $total; ?></td>
<td> </td>
</tr>
<tr>
<td width="140">Localidades disponibles: </td>
<td width="100" id="libres"><?php echo $libres; ?></td>
<td width="160"> </td>
</tr>
<?
$leyenda='Funciones - Horario:';
$sql="SELECT funcion, horario FROM funciones";
$rs=mysql_query($sql,$link);
for($i=1;$func=mysql_fetch_array($rs);$i++){
$hora=explode(" ",$func["horario"]);
?>
<tr>
<td><?php echo $leyenda; ?></td>
<td id="h_<?php echo $i; ?>"><?php echo end($hora); ?></td>
<td id="f_<?php echo $i; ?>"> </td>
</tr>
<?php
$leyenda=' ';
}
?>
<tr>
<td colspan="2"><input type="submit" name="Submit2" value="Nueva Función"></td>
<td id="hora_actual"> </td>
</tr></form>
</table>
Nota: faltaria que cuando se termine una funcion se envie los datos que estan en el cliente al servidor y resetear la sala
</body>
</html>
espero que te sea de utilidad.