al cambiar id y className internet explorer no pone los estilos

dabas · #1 (**permalink**) 31/03/2008, 13:15

¿porque no me funciona esto en IE?, en FF esta perfecto
parece que no actualiza los estilos y no se porque es

gracias por vuestra ayuda

Código HTML:

<html>
<head>
	<script type="text/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;
	}
	function clickRow(){
		this.className = 'seleccionado';
	}
	function mouseoverRow(){
		this.id='mouseover';
	}
	function mouseoutRow(){
		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></tr>
	</table>
</body>
</html>

codigojavascript · #2 (**permalink**) 31/03/2008, 17:46

Estuve probando el script y tienes razón, la unico que se me ocurre es que IE no actualiza automaticamente el estylo, raro no??

Haber si podemos solucionar esto!!!

Saludos

PD: el script funciona perfectamente, asigna el nuevo id y className al elemento (<TR>) en el evento asociado.

dabas · #3 (**permalink**) 01/04/2008, 11:38

tengo el ejemplo colgado por aqui: dabas.iespana.es/tablas.html

cambiando los estilos directamente tampoco funciona.
por ejmplo esto no funciona en IE pero si en FF

Código HTML:

	function clickRow(){
		this.style.background = 'blue';
	}

PD: incluso este foro tiene eventos mouseover y mouseout (al pasar el raton en los temas), para el efecto que pretendo realizar y tampoco se ve en IE

salu2

dabas · #4 (**permalink**) 01/04/2008, 16:50

ya lo he encontrado (aunque incompleto), despues de algunas horas investigando

esta colgado el ejemplo donde antes:

dabas.iespana.es/tablas.html

el problema que hay ahora es que ese "srcElement" es un TD, y yo queria un TR para toda la fila claro.
como consigo la fila? alguna idea?

funciones modificadas:

Código HTML:

	function clickRow(ev){
		if (ev.srcElement){ 	//para IE
			ev.srcElement.className = 'seleccionado';	
		}else{
			this.className = 'seleccionado';
		}
	}
	function mouseoverRow(ev){
		if (ev.srcElement){ 	//para IE
			ev.srcElement.id = 'mouseover';
		}else{
			this.id = 'mouseover';
		}

	}
	function mouseoutRow(ev){
		if (ev.srcElement){ 	//para IE
			ev.srcElement.id = '';
		}else{
			this.id = '';
		}
	}

dabas · #5 (**permalink**) 02/04/2008, 09:32

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