cambiar color de celdas con getElementById

mautik · #1 (**permalink**) 13/06/2007, 10:40

tengo una tabla distribuida asi:

Código PHP:

  <table>

<tr id="linea" bgcolor="c1c1c1">

 
<td><input type="checkbox" name="variable" onclick="document.getElementById('linea').bgColor='#ff0000'"></td>

<td>bla bla bla</td>

 
</tr>

</table>

La cual me cambia el color de fondo de la linea sin problema, pero cuando la desmarco el fondo queda, como hago para volver al color de fondo original?

mautik · #2 (**permalink**) 13/06/2007, 12:15

bueno lo arregle en forma burda pero si alguien tiene una mejor idea se le agradece

use la funcion onclick="cambia_color('lineaX');"

donde en la lineaX cambio el color y cambio las demas en otro color

El problema es si la tabla tiene muchas filas la funcion se vuelve enorme

Código PHP:

  function cambia_color(linea){

        document.getElementById(linea).bgColor='#50bfff';

 
        if (linea=='linea1') {

        document.getElementById('linea2').bgColor='#404a4f';

        document.getElementById('linea3').bgColor='#404a4f';

        document.getElementById('linea4').bgColor='#404a4f';

        }

        if (linea=='linea2') {

        document.getElementById('linea1').bgColor='#404a4f';

        document.getElementById('linea3').bgColor='#404a4f';

        document.getElementById('linea4').bgColor='#404a4f';

        }

        if (linea=='linea3') {

        document.getElementById('linea1').bgColor='#404a4f';

        document.getElementById('linea2').bgColor='#404a4f';

        document.getElementById('linea4').bgColor='#404a4f';

        }

        if (linea=='linea4') {

        document.getElementById('linea1').bgColor='#404a4f';

        document.getElementById('linea2').bgColor='#404a4f';

        document.getElementById('linea3').bgColor='#404a4f';

        }

}

JavierB · #3 (**permalink**) 13/06/2007, 12:33

Hola mautik

A ver que te parece este ejemplo:

Código PHP:

  <html>
<head>
<script type="text/javascript">
function cambiar(obj) {
  tab = document.getElementById('tabla');
  for (i=0; ele = tab.getElementsByTagName('input')[i]; i++)
    if (ele!=obj) ele.checked = false;
  for (i=0; ele = tab.getElementsByTagName('tr')[i]; i++)
    ele.style.background = '#fff';
  if (obj.checked)
    obj.parentNode.parentNode.style.background = '#f00';
}
</script>
</head>
<body>
<table id="tabla">
<tr>
<td><input type="checkbox" onclick="cambiar(this)" /></td><td>bla, bla, bla...</td>
</tr>
<tr>
<td><input type="checkbox" onclick="cambiar(this)" /></td><td>bla, bla, bla...</td>
</tr>
<tr>
<td><input type="checkbox" onclick="cambiar(this)" /></td><td>bla, bla, bla...</td>
</tr>
</table>
</body>
</html>

Saludos,