Para variar, problemas con setAttribute en IE

Myakire · #1 (**permalink**) 24/08/2006, 18:45

Hola compañeros del foro

He buscado por un buen rato en este foro buscando problemas similares pero aunque he visto muchos muy interesantes, nomás no logro modificar una tabla generada dinamicamente desde ASP en su atributo RowSpan mediente el DOM.

El código que utilizo es:

document.getElementById('Tabla').rows[1].cells[0].setAttribute('rowspan',Variable)

Y pero en IE no funciona, mientras que en FF todo esta OK (bueno, en realidad recorre las columnas que ocupará la afectada por el RowSpan, pero eso se soluciona).

El Código HTML que estoy utilizando para probar es este:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SICOI - Embarques Pendientes</title>
<META HTTP-EQUIV="Refresh" CONTENT="10;URL=http://servidor/reportes/emb_pend.asp">

<style type="text/css">
	.tabla {color:black;font-family:tahoma;font-size:14px;background-color:white;font-weight:bold}
	.TituloTabla {color:white;font-family:tahoma;font-weight:bold;font-size:14px;}
</style>
<script>
function ModificaFila(num){
  document.getElementById('Tabla').rows[1].cells[0].setAttribute('rowspan',num)
}
</script>
</head>

<body bgcolor="#0066cc">
<table width="990" border="1" cellpadding="0" cellspacing="2" class="tabla" id="Tabla">
<tr class="TituloTabla" align="center" bgcolor="#003366">
			<td width="9%">Fecha</td>
			<td width="5%">Plat</td>
			<td width="18%">Consignatario</td>
			<td width="25%">Cliente</td>
			<td width="5%">Planta</td>
			<td width="6%">Espesor</td>
			<td width="8%">Ancho</td>
			<td width="8%">Largo</td>
			<td width="9%">Listo</td>
			<td width="9%">Pendiente</td>
		</tr> 
			<tr bordercolor="black" align="center">
			   <td bgcolor="yellow">23/08/2006<input type='button' id='btn' value='..' onclick='ModificaFila(2)'></td>
				 <td>6</td>
				 <td>BATESVILLE</td>
  			 <td>ST-BATESVILLE</td>
				 <td>N1</td>
				 <td>1.20</td>
				<td>92.08</td>
				<td>0.00</td>
				<td>1,000</td>
				<td>&nbsp;</td>
			</tr>
			<tr bordercolor="black" align="center">

				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>228.60</td>
				<td>0.00</td>
				<td>1,424</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
	</table>
</body>
</html>

He leido en otros foros como en www.experts-exchange.com que si se puede, pero por más que pruebo en IE no funciona. ¿Hay un equivalente de este código para IE?

Saludos

caricatos · #2 (**permalink**) 24/08/2006, 19:49

Hola:

rowspan es ese típico nombre que lleva la "S" (ese) mayúscula...

Lo probé en mi probador y el meta que pusiste me dió un pequeño problema... pero con rowSpan he visto que hace algo...

Pruébalo y nos cuentas...

Saludos

Myakire · #3 (**permalink**) 24/08/2006, 20:22

Solo que sea por eso .......... dejame probar

gracias

Myakire · #4 (**permalink**) 24/08/2006, 21:00

Hombre, eso era. Gracias.

Pero ahora que yo lo estoy probando, noto algo que no había considerado: Cuando modifico el atributo de rowSpan, lo que en realidad hace el JS es insertar una columna a todas las filas involucradas en el rowSpan, y esto hace que se vayan defasando los datos.
Y esto como quiera, pero el problema es que el contador de columnas ya no es consecutivo (¿?) es decir, el rowSpan a la primer columna es a la celda 0, pero despues de que se inserta esa columna, la 1 es ahora la 2, pero no la cero sigue siendo la primer columna, entonces ¿qué índice le corresponde a la columna insertada automáticamente?

mmmmmm, vaya con este problema

caricatos · #5 (**permalink**) 25/08/2006, 08:38

Hola:

No llego a comprender lo que dices... rowSpan y colSpan no añaden nada sino que indican el número de filas o columnas que abarcan... con rowSpan=2 se indica que la celda actual abarca 2 filas... y el número de filas y columnas siempre tiene que cuadrar... por eso, no es que se añadan sino que estás indicando que hay una fila más... es algo complejo, que es la primera vez que veo que alguien quiera modificar...

Tal vez solo estés interesado a cambiar tamaños u otra cosa... bueno, espero haberte ayudado.

Saludos

Myakire · #6 (**permalink**) 25/08/2006, 11:37

Nop caricatos.

Veras, comprendo a los atributos tanto rowspan y colspan cuando diseñas tus tablas. Pero observa el código que puse arriba y que ejecutaste en tu probador.

Seguramente la primera vez no lo notaste pero si lo observas con cuidado verás que en el primer renglon tengo 9 columnas y en el segundo solo 8, por eso al ejecutar el código js (con la S mayúscula, claro) se cuadra bien, pero por ese detalle precisamente y por que solo son dos filas. Si agregas la 9a columna al segundo renglon verás que se recorre.

Entiendo perfectamente este comportamiento y es correcto, ya que tengo mis 9 columnas iniciales + la del rowspan. Lo que debo de hacer es o bien utilizar otro método para generar la tabla bien (como generar un arreglo y analizarlo antes de pintar la tabla) o algún otró método difente al modificar el atributo rowspan de las columnas.

Donde si me qudo con la duda es por que la confusión de los índices .... solo por cultura general ¿como se el numero de columnas que tiene un renglón afectado por el rowspan?

Por que document.getElementById('Tabla').rows[2].cells.length dice que tengo tantas columnas como el renglon original, es decir, no cuenta aquellas que se recorrieron. En fin, Gracias por tu ayuda caricatos, he aprendido algo más y le encontré el gusto a tu probador, jejeje

Cap.Buscapina · #7 (**permalink**) 25/08/2006, 17:12

parece que en este caso la frase "la materia es impenetrable" se aplica en un todo.

Antes de aplicar el rowSpan a la celda tenés que eliminar la otra que sobra.

Cita:

<html>
<head>
<title>SICOI - Embarques Pendientes</title>

<style type="text/css">
.tabla {color:black;font-family:tahoma;font-size:14px;background-color:white;font-weight:bold}
.TituloTabla {color:white;font-family:tahoma;font-weight:bold;font-size:14px;}
</style>
<script>
function ModificaFila(num){
document.getElementById('Tabla').rows[2].cells[0].parentNode.removeChild(document.getElementById('T abla').rows[2].cells[0]);
document.getElementById('Tabla').rows[1].cells[0].setAttribute('rowSpan',num);
document.getElementById('btn').disabled=true;
}
</script>
</head>

<body bgcolor="#0066cc">
<table width="990" border="1" cellpadding="0" cellspacing="2" class="tabla" id="Tabla">
<tr class="TituloTabla" align="center" bgcolor="#003366">
<td width="9%">Fecha</td>
<td width="5%">Plat</td>
<td width="18%">Consignatario</td>
<td width="25%">Cliente</td>
<td width="5%">Planta</td>
<td width="6%">Espesor</td>
<td width="8%">Ancho</td>
<td width="8%">Largo</td>
<td width="9%">Listo</td>
<td width="9%">Pendiente</td>
</tr>
<tr bordercolor="black" align="center">
<td bgcolor="yellow">23/08/2006<input type='button' id='btn' value='..' onclick='ModificaFila(2)'></td>
<td>6</td>
<td>BATESVILLE</td>
<td>ST-BATESVILLE</td>
<td>N1</td>
<td>1.20</td>
<td>92.08</td>
<td>0.00</td>
<td>1,000</td>
<td> </td>
</tr>
<tr bordercolor="black" align="center">

<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>228.60</td>
<td>0.00</td>
<td>1,424</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

saludos

Myakire · #8 (**permalink**) 25/08/2006, 19:43

Hombre!!, muchas gracias Cap.Buscapina

Sabía que algo así había que hacer, nomás no supe como implementarlo.

Muchas gracias ........

ya lo había hecho de otra forma (más complicada) pero lo modificaré nuevamente para implementar esto

Cap.Buscapina · #9 (**permalink**) 26/08/2006, 06:51

ok, me alegro

saludos