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,