Foros del Web - Ver Mensaje Individual - SOLUCIONADO: 'className' es nulo o no es un objeto

AlZuwaga · #1 (**permalink**) 01/08/2007, 15:11

Buenas, tengo este código (lo pongo completo por si lo quieren probar):

Código:

<!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>

El error que da IE6 es:

Cita:

IE6 dice: 'className' es nulo o no es un objeto

Y lo da en la línea 24, que es la del alert que usé para debugear:

Código:

alert('i vale ' + i + ' y tiene que llegar a ' + ((cantidad_filas * 2 - 1) - 1) + '\nLa clase se llama: ' + filas[i].className);

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...

¿Qué se puede hacer?

Edit: Usa dos imágenes que son estas:
images/flecha_abajo.gif:

images/flecha_arriba.gif: