Ver Mensaje Individual
  #5 (permalink)  
Antiguo 02/04/2008, 09:32
dabas
 
Fecha de Ingreso: julio-2006
Mensajes: 22
Antigüedad: 18 años, 4 meses
Puntos: 0
Re: al cambiar id y className internet explorer no pone los estilos

bueno esto ya lo he solucionado, como siempre la culpa es de "internet explorer", solo tenia que encontrar las propiedades correctas.
es extraño que aun asignando los eventos al elemento TR se invoque el TD, asique para IE habia que acceder al nodo padre.

para quien le interese el funcionamiento de esto:
hay una tabla, un boton y un campo de texto.
si pulso el boton añade una linea con el contenido del campo de texto.
cada fila de la tabla tiene eventos de click, mouseout y mouseover, que cambian los estilos de la fila.


Código HTML:
<html>
<head>
	<script type="text/javascript" language="JavaScript">
	function addnewRow(){
		var table = document.getElementById('mytable');

		//insertar una linea en la tabla, en la ultima posicion
		var newRow = table.insertRow(-1);
		
		//añadimos los eventos IE != FF
		if(typeof newRow.addEventListener != 'undefined'){
			newRow.addEventListener('click', clickRow, false);
			newRow.addEventListener('mouseover', mouseoverRow, false);
			newRow.addEventListener('mouseout', mouseoutRow, false);
		}else if(newRow.attachEvent != 'undefined'){
			newRow.attachEvent("onclick", clickRow);
			newRow.attachEvent("onmouseover", mouseoverRow);
			newRow.attachEvent("onmouseout", mouseoutRow);
		}
		
		newRow.insertCell(-1).innerHTML = document.getElementById('nombre').value;
		newRow.insertCell(-1).innerHTML = 'texto de prueba';
	}
	function clickRow(ev){
		if (ev.srcElement){ 	//para IE
			ev.srcElement.parentNode.className = 'seleccionado';	
		}else{
			this.className = 'seleccionado';
		}
	}
	function mouseoverRow(ev){
		if (ev.srcElement){ 	//para IE
			ev.srcElement.parentNode.id = 'mouseover';
		}else{
			this.id = 'mouseover';
		}

	}
	function mouseoutRow(ev){
		if (ev.srcElement){ 	//para IE
			ev.srcElement.parentNode.id = '';
		}else{
			this.id = '';
		}
	}
	</script>
	<style>
		.seleccionado{ background: #cca; }
		#mouseover { background: #ccc; }
	</style>
</head>
<body>
	<input type="text" id="nombre"/>
	<button onclick="javascript:addnewRow()">&nbsp;+&nbsp;</button>
	<table id="mytable" border="1" width="300px">
		<tr><th>Nombre</th><th>segunda columna</th></tr>
	</table>
</body>
</html> 

que os parece?
esta bien asi, no?

salu2