problema ie y protototype

rumo · #1 (**permalink**) 01/12/2006, 10:56

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.