SOLUCIONADO: 'className' es nulo o no es un objeto
Código:
El error que da IE6 es:<!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>Manipular una tabla</title>
<script type="text/javascript">
function prepara_tabla(){
var tabla = document.getElementById('mi_tabla');
var filas = tabla.rows;
for(i = 0; i < filas.length; i++){
la_celda = filas[i].cells[filas[i].cells.length - 1];
if(la_celda.nodeName.toLowerCase() == 'td'){
filas[i].setAttribute('class', 'az_fila_origen');
}
}
crea_copias('az_fila_origen');
}
function crea_copias(laClase){
var filas = document.getElementById('mi_tabla').getElementsByTagName('tr');
var cantidad_filas = filas.length;
for(i = 0; i < (cantidad_filas * 2 - 1); i++){
alert('i vale ' + i + ' y tiene que llegar a ' + ((cantidad_filas * 2 - 1) - 1) + '\nLa clase se llama: ' + filas[i].className);
if(filas[i].className == laClase){
la_celda = filas[i].cells[filas[i].cells.length - 1];
nuevo_row = document.createElement('tr');
nuevo_cell = document.createElement('td');
nuevo_cell.setAttribute('colspan', '5');
nuevo_cell_texto = document.createTextNode(la_celda.textContent);
nuevo_cell.appendChild(nuevo_cell_texto);
nuevo_row.style.display = 'none';
nuevo_row.setAttribute('class', 'azNuevaFila')
nuevo_row.appendChild(nuevo_cell);
la_celda.textContent = '';
nueva_imagen = document.createElement('img');
nueva_imagen.setAttribute('src', 'images/flecha_abajo.gif');
nueva_imagen.onclick = function(){muestra_oculta(this);};
nueva_imagen.onmouseover = function(){this.style.cursor = 'pointer';};
la_celda.appendChild(nueva_imagen);
// comienza código de caricatos para emular un insertAfter \\
if(filas[i].parentNode.lastChild == filas[i]){
filas[i].parentNode.appendChild(nuevo_row);
}
else{
filas[i].parentNode.insertBefore(nuevo_row, filas[i].nextSibling);
}
// finaliza código de caricatos para emular un insertAfter \\
}//if
}
}
function muestra_oculta(elemento){
la_fila = elemento.parentNode.parentNode.nextSibling;
la_fila.previousSibling.style.borderLeft = '5px solid #666666;';
if(la_fila.style.display == 'none'){
la_fila.style.display = 'table-row';
elemento.src = 'images/flecha_arriba.gif';
}
else{
la_fila.style.display = 'none';
la_fila.previousSibling.style.borderLeft = 'inherit';
elemento.src = 'images/flecha_abajo.gif';
}
}
window.onload = prepara_tabla;
</script>
<style type="text/css">
<!--
#mi_tabla {
border-collapse: collapse;
font-family: Georgia, "Times New Roman", Times, serif;
width: 650px;
}
#mi_tabla th {
background: #CCCCCC;
}
#mi_tabla td, #mi_tabla th {
border-collapse: collapse;
border: 1px solid #666666;
padding: 5px;
}
.azNuevaFila{
background: #F7F7F7;
color: #333333;
border-bottom: 5px solid #666666;
border-left: 5px solid #666666;
font-size: 12px;
}
-->
</style>
</head>
<body>
<h1>Manipular una tabla</h1>
<table id="mi_tabla" cellspacing="1">
<tr>
<th scope="col">Encabezado 1</th>
<th scope="col">Encabezado 2</th>
<th scope="col">Encabezado 3</th>
<th scope="col">Encabezado 4</th>
<th scope="col">Encabezado 5</th>
</tr>
<tr>
<td>Dato 1.1</td>
<td>Dato 1.2</td>
<td>Dato 1.3</td>
<td>Dato 1.4</td>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris orci turpis, porta id, varius vel, cursus sit amet, enim. Suspendisse dui lectus, dapibus quis, vestibulum in, auctor ut, sapien. In aliquet purus sed ligula aliquet sagittis. Nulla sodales. In scelerisque. Nulla ultrices dignissim erat. Praesent lorem tellus, dignissim ac, ultrices in, ullamcorper sed, dolor. Nulla facilisi. Donec luctus, metus eu eleifend venenatis, nibh lacus lacinia ante, eget lobortis neque ante non dui. Nam tristique. Fusce sagittis diam eu augue. Duis dui massa, volutpat vel, molestie id, mollis consequat, est. Praesent dapibus ultrices lacus. Aliquam pulvinar tellus id nulla. Suspendisse lacinia nulla in leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse et turpis in mi lacinia aliquet. Vivamus diam lorem, convallis quis, egestas vel, pretium id, lorem.</td>
</tr>
<tr>
<td>Dato 2.1</td>
<td>Dato 2.2</td>
<td>Dato 2.3</td>
<td>Dato 2.4</td>
<td>Etiam tristique vehicula lacus. Mauris velit nulla, laoreet sit amet, dapibus ac, venenatis et, leo. Nulla facilisi. Ut accumsan dolor et turpis. Donec ultrices. In hac habitasse platea dictumst. Nulla pharetra elit id est. Integer a ipsum. Aliquam auctor. Ut ullamcorper quam ut urna.</td>
</tr>
</table>
</body>
</html>
Cita:
Y lo da en la línea 24, que es la del alert que usé para debugear:IE6 dice: 'className' es nulo o no es un objeto
Código:
Otra cosa... vean la diferencia entre el alert de FF y el de IE... En FF la variable i toma los valores 0, 1, 2, 3 y 4 mientras que en IE la misma variable vale 0, 1 y 2! Ah, por supuesto que filas[i].className viene vacío o nulo...alert('i vale ' + i + ' y tiene que llegar a ' + ((cantidad_filas * 2 - 1) - 1) + '\nLa clase se llama: ' + filas[i].className);
¿Qué se puede hacer?
Edit: Usa dos imágenes que son estas:
images/flecha_abajo.gif:
images/flecha_arriba.gif:
