hola a todos, les cuento estoy probando un codigo javascript que funciona con prototype y dom, el html es una tabla con varios cuadros typo checkbox pero de colores donde, al hacer click en el cuadro superior se marcan todos los cuadros de abajo y ademas cada cuadro de abajo se puede cambiar independientemente el problema es que en firefox y opera me funciona bn pero en explorer me da un error y realmente no se que pasa asi que si alguien me puede ayudar lo agradeceria aca les dejo el codigo que estoy probando:
js.js
Código:
// JavaScript Document
function init(){
var diasact = $('dias').getElementsByTagName('div');
var d;
for(d=0;d<diasact.length;d++){
if(Element.classNames(diasact[d])!='checkbox_i'){
var x = diasact[d];
Event.observe(diasact[d].id, 'click',function(x) {cambia(this)});
}
}
var zonaeditp = $('datos_dias');
var diaspact = zonaeditp.getElementsByTagName('div');
var a;
for(a=0;a<diaspact.length;a++){
if(Element.classNames(diaspact[a])!='checkbox_i'){
var y = diaspact[a];
Event.observe(diaspact[a].id, 'click',function (y){cambiap(this)});
}
}
}
function cambia(obj){
if(Element.classNames(obj) == 'checkbox_p'){
var pclass = 'checkbox_p';
var nclass = 'checkbox_sl';
var ntxt = 'SL';
}else{
var pclass = 'checkbox_sl';
var nclass = 'checkbox_p';
var ntxt = 'P';
}
Element.removeClassName(obj, pclass);
Element.addClassName(obj, nclass);
obj.innerHTML = ntxt;
var getid = obj.id;
var zonadivs = $('dia_'+getid);
var divs = zonadivs.getElementsByTagName('div');
for(d=0;d<divs.length;d++){
Element.removeClassName(divs[d], 'checkbox_p');
Element.removeClassName(divs[d], 'checkbox_sl');
Element.removeClassName(divs[d], 'checkbox_a');
Element.addClassName(divs[d], nclass);
divs[d].innerHTML = ntxt;
}
}
function cambiap(obj){
if(Element.classNames(obj) != 'checkbox_sl'){
if(Element.classNames(obj) == 'checkbox_p'){
var pclass = 'checkbox_p';
var nclass = 'checkbox_a';
var ntxt = 'A';
}else{
var pclass = 'checkbox_a';
var nclass = 'checkbox_p';
var ntxt = 'P';
}
Element.removeClassName(obj, pclass);
Element.addClassName(obj, nclass);
obj.innerHTML = ntxt;
}
}
tabla.html
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="prototype.js"></script>
<script language="JavaScript" type="text/javascript" src="js.js"></script>
<script type="text/javascript">
Event.observe(window,'load',init);
</script>
</head>
<body>
<table width="250" border="0" cellpadding="0" cellspacing="0" id="dias">
<tr>
<td width="25" height="30"><div class="checkbox_p" id="1">P</div></td>
<td width="25"><div class="checkbox_p" id="2">P</div></td>
<td width="25"><div class="checkbox_p" id="3">P</div></td>
<td width="25"><div class="checkbox_p" id="4">P</div></td>
<td width="25"><div class="checkbox_p" id="5">P</div></td>
<td width="25"><div class="checkbox_p" id="6">P</div></td>
<td width="25"><div class="checkbox_i" id="7">P</div></td>
<td width="25"><div class="checkbox_i" id="8">P</div></td>
<td width="25"><div class="checkbox_i" id="9">P</div></td>
<td width="25"><div class="checkbox_i" id="10">P</div></td>
</tr>
</table>
<table width="250" border="0" cellspacing="0" cellpadding="0" id="datos_dias">
<tr>
<td><table width="25" border="0" cellspacing="2" cellpadding="0" id="dia_1">
<tr>
<td><div class="checkbox_p" id="1_1">P</div></td>
</tr>
<tr>
<td><div class="checkbox_p" id="1_2">P</div></td>
</tr>
<tr>
<td><div class="checkbox_p" id="1_3">P</div></td>
</tr>
<tr>
<td><div class="checkbox_p" id="1_4">P</div></td>
</tr>
<tr>
<td><div class="checkbox_p" id="1_5">P</div></td>
</tr>
</table></td>
<td width="25"><table width="25" border="0" cellspacing="2" cellpadding="0" id="dia_2">
<tr>
<td><div class="checkbox_p" id="2_1">P</div></td>
</tr>
<tr>
<td><div class="checkbox_p" id="2_2">P</div></td>
</tr>
<tr>
<td><div class="checkbox_p" id="2_3">P</div></td>
</tr>
<tr>
<td><div class="checkbox_p" id="2_4">P</div></td>
</tr>
<tr>
<td><div class="checkbox_p" id="2_5">P</div></td>
</tr>
</table></td>
<td width="25"><table width="25" border="0" cellspacing="2" cellpadding="0" id="dia_3">
<tr>
<td><div class="checkbox_p" id="3_1">P</div></td>
</tr>
<tr>
<td><div class="checkbox_p" id="3_2">P</div></td>
</tr>
<tr>
<td><div class="checkbox_p" id="3_3">P</div></td>
</tr>
<tr>
<td><div class="checkbox_p" id="3_4">P</div></td>
</tr>
<tr>
<td><div class="checkbox_p" id="3_5">P</div></td>
</tr>
</table></td>
<td width="25"><table width="25" border="0" cellspacing="2" cellpadding="0" id="dia_4">
<tr>
<td><div class="checkbox_p" id="4_1">P</div></td>
</tr>
<tr>
<td><div class="checkbox_p" id="4_2">P</div></td>
</tr>
<tr>
<td><div class="checkbox_p" id="4_3">P</div></td>
</tr>
<tr>
<td><div class="checkbox_p" id="4_4">P</div></td>
</tr>
<tr>
<td><div class="checkbox_p" id="4_5">P</div></td>
</tr>
</table></td>
<td width="25"><table width="25" border="0" cellspacing="2" cellpadding="0" id="dia_5">
<tr>
<td><div class="checkbox_p" id="5_1">P</div></td>
</tr>
<tr>
<td><div class="checkbox_p" id="5_2">P</div></td>
</tr>
<tr>
<td><div class="checkbox_p" id="5_3">P</div></td>
</tr>
<tr>
<td><div class="checkbox_p" id="5_4">P</div></td>
</tr>
<tr>
<td><div class="checkbox_p" id="5_5">P</div></td>
</tr>
</table></td>
<td width="25" style="border:1px solid #FFCC00;"><table width="25" border="0" cellspacing="2" cellpadding="0" id="dia_6">
<tr>
<td><div class="checkbox_p" id="6_1">P</div></td>
</tr>
<tr>
<td><div class="checkbox_p" id="6_2">P</div></td>
</tr>
<tr>
<td><div class="checkbox_p" id="6_3">P</div></td>
</tr>
<tr>
<td><div class="checkbox_p" id="6_4">P</div></td>
</tr>
<tr>
<td><div class="checkbox_p" id="6_5">P</div></td>
</tr>
</table></td>
<td width="25"><table width="25" border="0" cellspacing="2" cellpadding="0">
<tr>
<td><div class="checkbox_i">P</div></td>
</tr>
<tr>
<td><div class="checkbox_i">P</div></td>
</tr>
<tr>
<td><div class="checkbox_i">P</div></td>
</tr>
<tr>
<td><div class="checkbox_i">P</div></td>
</tr>
<tr>
<td><div class="checkbox_i">P</div></td>
</tr>
</table></td>
<td width="25"><table width="25" border="0" cellspacing="2" cellpadding="0">
<tr>
<td><div class="checkbox_i">P</div></td>
</tr>
<tr>
<td><div class="checkbox_i">P</div></td>
</tr>
<tr>
<td><div class="checkbox_i">P</div></td>
</tr>
<tr>
<td><div class="checkbox_i">P</div></td>
</tr>
<tr>
<td><div class="checkbox_i">P</div></td>
</tr>
</table></td>
<td width="25"><table width="25" border="0" cellspacing="2" cellpadding="0">
<tr>
<td><div class="checkbox_i">P</div></td>
</tr>
<tr>
<td><div class="checkbox_i">P</div></td>
</tr>
<tr>
<td><div class="checkbox_i">P</div></td>
</tr>
<tr>
<td><div class="checkbox_i">P</div></td>
</tr>
<tr>
<td><div class="checkbox_i">P</div></td>
</tr>
</table></td>
<td width="25"><table width="25" border="0" cellspacing="2" cellpadding="0">
<tr>
<td><div class="checkbox_i">P</div></td>
</tr>
<tr>
<td><div class="checkbox_i">P</div></td>
</tr>
<tr>
<td><div class="checkbox_i">P</div></td>
</tr>
<tr>
<td><div class="checkbox_i">P</div></td>
</tr>
<tr>
<td><div class="checkbox_i">P</div></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
css.css
Código HTML:
.checkbox_p, .checkbox_a, .checkbox_i, .checkbox_sl {
height: 20px;
width: 20px;
margin:auto;
font-size:10px;
line-height:20px;
text-align:center;
font-family:"Trebuchet MS", Verdana, Arial;
}
.checkbox_p {
background-color:#CEF0FD;
color:#1166BB;
}
.checkbox_a {
background-color: #FFDFDF;
color: #BF0000;
}
.checkbox_sl {
background-color: #CCCCCC;
color: #999999;
}
.checkbox_i{
background-color: #EFEFEF;
color: #CCCCCC;
}
y prototype
si alguien me pudiese dar una mano lo agradeceria, salu2, mientras tanto seguire revisando.