Cambiar color a celdas continuas

orharo2003 · #1 (**permalink**) 09/10/2007, 10:47

Tengo una tabla con x numero de celdas, de tal forma q cada registro q visualizo está formadao por 4 celdas, lo q pretendo es q al pasar el puntero del mouse en alguna de ellas cambien de el color de fonto todas las celdas de esa fila.

algo asi :

<table>
<tr>
<td> datos <td> datos <td>datos <td> datos
<tr>
<td> datos <td> datos <td>datos <td> datos
.... más registros....

</table>

Lo he intentado solo con una celda, pero no consigo hacerlo con las demás al mismo tiempo.

JavierB · #2 (**permalink**) 09/10/2007, 11:05

Hola orharo2003

En lugar de cambiar el color a las celdas (td) cámbialo a la fila (tr)

Saludos,

orharo2003 · #3 (**permalink**) 09/10/2007, 11:10

Gracias por responder :

El problema es q las celdas tienen ya un color aleatorio, es decir una fila tiene un color gris y la otra blanco, asi sucesivamente... lo q estoy intentando ahorita es asignarles un id a cada celda con el mismo nombre para formar un arreglo de elementos y despues acceder asi :

celda(numero_elemento).style.backgroundColor="#f0e 68c"

derkenuke · #4 (**permalink**) 09/10/2007, 16:09

Hola orharo2003:

He preparado un ejemplo más o menos viable de lo que se podría hacer sin poner ids en las filas (independientemente del color de fondo que tengan en un principio):

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">

window.onload = function() {
    var laTabla = document.getElementById("tabla");
    var filas = laTabla.getElementsByTagName("TR");
    for(var i=0, l=filas.length; i<l; i++) {
        filas[i].onmouseover = function() {
            this.viejoBgcolor = this.style.backgroundColor;
            this.style.backgroundColor = "#7777f5";
        }
        filas[i].onmouseout = function() {
            this.style.backgroundColor = this.viejoBgcolor;
        }
    }
}

</script>


</head>

<body>

<table id="tabla" border="1" style="width: 500px;">
    <tr style="background-color:#afafaf;">
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr style="background-color:#ffffff;">
        <td>d</td>
        <td>e</td>
        <td>f</td>
    </tr>
    <tr style="background-color:#afafaf;">
        <td>g</td>
        <td>h</td>
        <td>i</td>
    </tr>
    <tr style="background-color:#ffffff;">
        <td>d</td>
        <td>e</td>
        <td>f</td>
    </tr>
    <tr style="background-color:#afafaf;">
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr style="background-color:#ffffff;">
        <td>d</td>
        <td>e</td>
        <td>f</td>
    </tr>
    <tr style="background-color:#afafaf;">
        <td>g</td>
        <td>h</td>
        <td>i</td>
    </tr>
    <tr style="background-color:#ffffff;">
        <td>d</td>
        <td>e</td>
        <td>f</td>
    </tr>
    <tr style="background-color:#afafaf;">
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr style="background-color:#ffffff;">
        <td>d</td>
        <td>e</td>
        <td>f</td>
    </tr>
    <tr style="background-color:#afafaf;">
        <td>g</td>
        <td>h</td>
        <td>i</td>
    </tr>
</table>


</body>
</html>

Un saludo.

orharo2003 · #5 (**permalink**) 10/10/2007, 08:37

Muchas gracias derkenuke, tu ejemplo ha sido muy practico.
Lo he implementado asi..