Para todos:
Yo lo veo tan facil como una funcion de una sola linea, con nuestro amigo DOM que cada dia me gusta mas
:
Código PHP:
<html>
<head>
<script>
function marcar(check) {
check.parentNode.parentNode.style.backgroundColor=check.checked?"#FF0000":"#FFFFFF";
}
</script>
</head>
<body>
<table>
<tr id="fila1">
<td>Celda 1</td>
<td>Celda 2</td>
<td>
<input type="checkbox" onClick="marcar(this)">
</td>
</tr>
<tr id="fila2">
<td>Celda 3</td>
<td>Celda 4</td>
<td>
<input type="checkbox" onClick="marcar(this)">
</td>
</tr>
<tr id="fila3">
<td>Celda 3</td>
<td>Celda 4</td>
<td>
<input type="checkbox" onClick="marcar(this)">
</td>
</tr>
</table>
</body>
</html>
Para
lithiumfire:
Antes de nada me gustaria comentarte un par de cosas de tu (x)HTML:
1) Es la primera vez que veo <thead>, gracias por mostrarmela
2) <th> es una
celda en negrita y centrada, pero una celda, no es un grupo de celdas.
3) ¿Un elemento <td> sin contenido, cerrado? m?
4) No puedes poner atributos id iguales a distintos elementos, habría problemas.
5) Hay enlaces sin abrir (</a>) en la primera celda <td>
Con DOM tambien. Se podria hacer esto para ahorrarte ensuciar el HTML:
Código PHP:
<html>
<head>
</head>
<body>
<table id="tablaEspecial" border="1">
<thead>
<tr>
<th>Option One</th>
<th>Option Two</th>
<th>Option Three</th>
<th>Option Four</th>
</tr>
</thead>
<tbody>
<tr>
<td>05</td>
<td>ABC</td>
<td>12.00</td>
<td>12/12/2004</td>
</tr>
<tr>
<td>05</td>
<td>ABC</td>
<td>12.00</td>
<td>12/12/2004</td>
</tr>
<tr>
<td>05</td>
<td>ABC</td>
<td>12.00</td>
<td>12/12/2004</td>
</tr>
<tr>
<td>05</td>
<td>ABC</td>
<td>12.00</td>
<td>12/12/2004</td>
</tr>
</tbody>
</table>
<table id="otraTabla" border="1">
<thead>
<tr>
<th>Option One</th>
<th>Option Two</th>
<th>Option Three</th>
<th>Option Four</th>
</tr>
</thead>
<tbody>
<tr>
<td>05</td>
<td>ABC</td>
<td>12.00</td>
<td>12/12/2004</td>
</tr>
<tr>
<td>05</td>
<td>ABC</td>
<td>12.00</td>
<td>12/12/2004</td>
</tr>
<tr>
<td>05</td>
<td>ABC</td>
<td>12.00</td>
<td>12/12/2004</td>
</tr>
<tr>
<td>05</td>
<td>ABC</td>
<td>12.00</td>
<td>12/12/2004</td>
</tr>
</tbody>
</table>
<script>
//la tabla especial
var tE=document.getElementById("tablaEspecial");
//las celdas de la tabla especial
var tE_td=tE.getElementsByTagName("TD");
//por cada celda en tE
for(var a=0;a<tE_td.length;a++) {
tE_td[a].onmouseover=function() {
//las celdas de la fila de esta celda
var tE_td_tr_tds=this.parentNode.childNodes;
//coloreamos cada celda de la fila
for(var b=0;b<tE_td_tr_tds.length;b++)
tE_td_tr_tds[b].style.backgroundColor="#0000FF";
//coloreamos la propia celda
this.style.backgroundColor="#00FF00";
}
tE_td[a].onmouseout=function() {
//las celdas de la fila de esta celda
var tE_td_tr_tds=this.parentNode.childNodes;
//descoloreamos cada celda de la fila
for(var b=0;b<tE_td_tr_tds.length;b++)
tE_td_tr_tds[b].style.backgroundColor="#FFFFFF";
//descoloreamos la propia celda
this.style.backgroundColor="#FFFFFF";
}
}
</script>
</body>
</html>
Esta hecho de manera que es aplicable a la tabla que quieras, pero si las quieres para todas las de tu documento no es dificil, basta sustituir esto:
Código:
//la tabla especial
var tE=document.getElementById("tablaEspecial");
//las celdas de la tabla especial
var tE_td=tE.getElementsByTagName("TD");
Con
Código:
var tE_td=document.getElementsByTagName("TD");
Aunque lo mas sensato seria cambiar el nombre de la variable, por si no te quieres andar con complicaciones.
Y un saludo a todos!
