Resaltar columnas

hemiliano · #1 (**permalink**) 23/02/2006, 20:12

Lo que quiero hacer es eso. Tengo una tabla con filas y columnas y quiero pasar por mi tabla y generar como un efecto de cruz, esto es resaltando las filas y las columnas. Ahora, resaltar la fila se hacerlo, pero resaltar columnas quisiera saber si alguien tiene algo para mostrarme.
Se me ocurre poner ids a cada td y luego llamarlos por nombre de alguna manera, pero quiero ver si tienen mejores ideas o ideas implementadas ya.

Saludos y gracias.

JavierB · #2 (**permalink**) 24/02/2006, 03:26

Hola hemiliano

Una idea:

Código:

<html>
<head>
<script type="text/javascript">
function ini() {
  obj=document.getElementById('tabla');
  for(i=0; ele=obj.getElementsByTagName('td')[i]; i++) {
    ele.onmouseover = function() {marcar(this,'red')}
    ele.onmouseout = function() {marcar(this,'')}
    }
}
function marcar(obj,co) {
  fila=obj.parentNode;
  fila.style.background = co;
  // averiguar número de celda
  for (i=0; ele=fila.getElementsByTagName('td')[i]; i++)
    if (ele==obj) num = i;
    
  tab=document.getElementById('tabla');
  for (i=0; ele=tab.getElementsByTagName('tr')[i]; i++)
    ele.getElementsByTagName('td')[num].style.background = co;
}
</script>
</head>
<body onload="ini()">
<table id="tabla" border="1">
<tr>
<td>Celda</td><td>Celda</td><td>Celda</td>
</tr>
<tr>
<td>Celda</td><td>Celda</td><td>Celda</td>
</tr>
<tr>
<td>Celda</td><td>Celda</td><td>Celda</td>
</tr>
</body>
</html>

Saludos,

hemiliano · #3 (**permalink**) 24/02/2006, 06:28

Fenomeno, muchas gracias!.
Ahora, te comento un inconveniente que tengo, si bien la funcion funciona (valga la redundancia) correctamente. en mi caso tengo columnas colapsadas y es ahí donde no funciona, debe ser por el colspan, y también tengo rowspan.
Tenes idea que puede ser?.

Gracias.

SiR.CARAJ0DIDA · #4 (**permalink**) 24/02/2006, 07:16

Código:

<table>
	<col style="background-color:#ff0000">
	<col>
	<col>
	<tr>
		<td>asdasd</td>
		<td>asdasd</td>
		<td>asdasd</td>
	</tr>
	<tr>
		<td>asdasd</td>
		<td>asdasd</td>
		<td>asdasd</td>
	</tr>
</table>