Foros del Web » Programando para Internet » Javascript »

Cambiar de color fila de una tabla

Estas en el tema de Cambiar de color fila de una tabla en el foro de Javascript en Foros del Web. Hola a todos, un cordial saludo en primer lugar en mi estreno dentro de este foro. Espero que podais ayudarme alguno, os estaré muy agradecido ...
  #1 (permalink)  
Antiguo 17/01/2002, 04:40
Avatar de eskillar  
Fecha de Ingreso: enero-2002
Ubicación: Euskadi
Mensajes: 34
Antigüedad: 22 años, 3 meses
Puntos: 0
Cambiar de color fila de una tabla

Hola a todos,
un cordial saludo en primer lugar en mi estreno dentro de este foro.
Espero que podais ayudarme alguno, os estaré muy agradecido (invito a una cañita).

La pregunta es la siguiente,
tengo una tabla en html, de lo más normal:

<table>
<tr bgcolor=green id=fila1><td>texto 1</td></tr>
<tr bgcolor=green id=fila2><td>texto 2</td></tr>
</table>

Quiero hacer una funcion de javascript para ejecutarla al pulsar un boton en la página:
function pintafila(numFila){ ... }
para cambiar el color de las filas, pero no se como accede a esa propiedad desde JScript,

¿Alguna idea? Gracias de antemano a todos,
salu2 ;)
  #2 (permalink)  
Antiguo 17/01/2002, 06:57
 
Fecha de Ingreso: diciembre-2001
Mensajes: 150
Antigüedad: 22 años, 4 meses
Puntos: 1
Re: Cambiar de color fila de una tabla

Hola eskillar:

Primero, es aconsejable que nombres la tabla y las filas:

<TABLE NAME="Mitabla">
<TR ID=0>...</TR>
<TR ID=1>...</TR>
<TR ID=N>...</TR>
</TABLE>
Luego llamas a la función de la forma que indicabas: pintafila(fila.id)

La función sería algo así (lo hago de memoria, tal vez te casque algo):

function pintafila(Fila){
for (i=0;i<Mitabla.rows.length;i++){
if (Mitabla.rows(i).id==Fila){
Mitabla.rows(i).style.backgroundColor = "#bdd7de";
}else{
Mitabla.rows(i).style.backgroundColor = "#ffffff";
}
}

Espero que te sirva.

Korrikalari
  #3 (permalink)  
Antiguo 17/01/2002, 15:22
Avatar de mikel_gomez  
Fecha de Ingreso: febrero-2001
Mensajes: 482
Antigüedad: 23 años, 2 meses
Puntos: 3
Re: Cambiar de color fila de una tabla

Bienvenido a los foros del web Skillar .
Sobre tu consulta, todo sea por la cañita, te dejo un ejemplo completo de como se podría hacer:

<pre>&lt;html&gt;
&lt;head&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
function cambiaFondo(objid, color) {
var objeto = document.getElementById(objid);
objeto.style.backgroundColor = color;
return;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form id=&quot;frm&quot;&gt;
&lt;table&gt;
&lt;tr id=&quot;fila1&quot; style=&quot;background-color: green;&quot;&gt;
&lt;td&gt;texto 1.1&lt;/td&gt;
&lt;td&gt;texto 1.2&lt;/td&gt;
&lt;td&gt;
&lt;input type=&quot;button&quot; value=&quot;Gris&quot;
onclick=&quot;cambiaFondo('fila1','silver')&quot; /&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;input type=&quot;button&quot; value=&quot;Amarillo&quot;
onclick=&quot;cambiaFondo('fila1','gold')&quot; /&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr id=&quot;fila2&quot; style=&quot;background-color: green;&quot;&gt;
&lt;td&gt;texto 2.1&lt;/td&gt;
&lt;td&gt;texto 2.2&lt;/td&gt;
&lt;td&gt;
&lt;input type=&quot;button&quot; value=&quot;Gris&quot;
onclick=&quot;cambiaFondo('fila2','silver')&quot; /&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;input type=&quot;button&quot; value=&quot;Amarillo&quot;
onclick=&quot;cambiaFondo('fila2','gold')&quot; /&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt; </pre>

Probado satisfactoriamente en Explorer 6 y Netscape 6.2

Saludos.

<style>.t{font: 8pt verdana; text-decoration: none; color: black;}</style><hr><span class="t"><a href="mailto:[email protected]" class="t" style="font: 10pt;">Mikel Gómez</a><br>Hay que aprender mucho para saber poco.</span>
  #4 (permalink)  
Antiguo 18/01/2002, 06:25
Avatar de eskillar  
Fecha de Ingreso: enero-2002
Ubicación: Euskadi
Mensajes: 34
Antigüedad: 22 años, 3 meses
Puntos: 0
Re: Cambiar de color fila de una tabla

Hola de nuevo,
me adelante a vuestras respuestas y consegui resolverlo del siguiente modo:
(ahi queda por si le sirve a alguien)

1º- FUNCION JSCRIPT:
function pintafila_tbl(mivalue) {
var string;
string=mivalue + &quot;.setAttribute('bgcolor', 'red', 0)&quot;;
eval(string);
}

2º- AÑADIR IDENTIFICADORES A CADA FILA DE LA TABLA:
&lt;table border=1 width=100%&gt;
&lt;tr id='f1' bgcolor=blue&gt;&lt;td&gt;Esta es la fila 1&lt;/td&gt;&lt;/tr&gt;
&lt;tr id='f2' bgcolor=blue&gt;&lt;td&gt;Esta es la fila 2&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;

3º- LLAMADA DESDE OTRA FUNCION (recibe el id de la fila como parametro):
pintafila_tbl('f1');

-------------
Eskerrik asko

Salu2,
eskillar ;)
  #5 (permalink)  
Antiguo 18/01/2002, 13:48
Avatar de mikel_gomez  
Fecha de Ingreso: febrero-2001
Mensajes: 482
Antigüedad: 23 años, 2 meses
Puntos: 3
Re: Cambiar de color fila de una tabla

Eskillar

No sé con que navegador y versión habrás probado la función que publicas. Lo digo porque:

1. setAttribute() es un método que Microsoft se sacó de la manga. No forma parte de ningún estándar. Lógicamente, Todas la versiones de Netscape devuelven un error al encontrarse este método.

2. En Explorer 6 , tu ejemplo solo me funciona con celdas , pero no con filas. En las anteriores no he probado, a lo mejor si va.

Por ello te recomiendo que utilices la que te dí (pero tampoco es una obligación, ¿eh?) ;)

<pre>function cambiaFondo(objid, color) {
var objeto = document.getElementById(objid);
objeto.style.backgroundColor = color;
return;
} </pre>

O si no quieres cambiar tus llamadas:

<pre>function cambiaFondo(mivalue) {
var objeto = document.getElementById(mivalue);
objeto.style.backgroundColor = 'red' ;
return;
} </pre>

Esta función te funcionará en todos los navegadores que cumplan el estándar DOM (Document Object Modelling)... Netscape 6+, Explorer 5+ ... A ojo más del 95% de los navegadores.

Ondo pasa.

Eta zuk euskalduna zara ere bai? ;)


<style>.t{font: 8pt verdana; text-decoration: none; color: black;}</style><hr><span class="t"><a href="mailto:[email protected]" class="t" style="font: 10pt;">Mikel Gómez</a><br>Hay que aprender mucho para saber poco.</span>
  #6 (permalink)  
Antiguo 18/01/2002, 17:50
Avatar de Kaopectate
Colaborador
 
Fecha de Ingreso: diciembre-2001
Ubicación: Curaçao (Antillas Holandesas)
Mensajes: 3.179
Antigüedad: 22 años, 4 meses
Puntos: 38
Re: Cambiar de color fila de una tabla

Mikel, las dos ultimas líneas de tu mensaje las probé en IE 5.5, NS 6.0, Opera y hasta en la máquina Java y nadie las reconoce...¿Son DOM?
<BLOCKQUOTE><font size=1 face=arial>Citando:<hr height=1 noshade>
Ondo pasa.

Eta zuk euskalduna zara ere bai?
[/QUOTE]
  #7 (permalink)  
Antiguo 20/01/2002, 14:17
Avatar de eskillar  
Fecha de Ingreso: enero-2002
Ubicación: Euskadi
Mensajes: 34
Antigüedad: 22 años, 3 meses
Puntos: 0
Re: Cambiar de color fila de una tabla

Hola de nuevo,
quiero decir que Mikel Gomez lleva mucha razón en este asunto, asi que seguir su ejemplo y no el de un pobre aprendiz como yo.

1º- El codigo que he indicado anteriormente funciona en iExplorer 5. No lo he probado en otro browser, pero si realmente no funciona menuda castaña.

2º- Un segundo problema se plantea si el color de cada fila viene determinado por una clase definida en un fichero de estilo. La instrucción que he utilizado no cambiaba el color de la fila en ese caso, cuestión de nivel de preferencia.

Rectificar es de sabios y aunque no lo seré porque lo haga, yo utilizaré la versión del experto. Gracias Mikel.

------------------------------------
Salu2, eskillar

PD: Ez dakit oso ondo euskera hitzegitea, baina ikastea gustatuko litzaidake.
(y dejemos de hablar en euskera que no nos va a entender nadie) :P
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:29.