25/06/2004, 01:41
| |||
| |||
| filas iluminadas que enlazan Tengo una tabla con 5 columnas y 4 filas y quiero que cada vez que el puntero pasa por una celda se enciende toda su fila y aparezca el puntero como mano indicando que pinchando en cualquier celda de esa fila se enlaza a una direccion determinada, y que cada fila o tr se encienda de un color diferente. Como puedo hacerlo? con javascript o css? gracias |
|
25/06/2004, 02:34
| ||||
| ||||
| Hola chusete: Prueba esto:
Código:
Saludos x = document.getElementById("tabla");
for (var i = 0; i < x.rows.length; i ++) {
x.rows[i].style.cursor = "pointer";
x.rows[i].style.backgroundColor = (i % 2 == 0) ? "red" : "blue";
x.rows[i].onmouseover = (i % 2 == 0) ?
function() {this.style.backgroundColor = 'yellow';}:
function() {this.style.backgroundColor = 'lime';};
x.rows[i].onmouseout = (i % 2 == 0) ?
function() {this.style.backgroundColor = 'red';}:
function() {this.style.backgroundColor = 'blue';};
x.rows[i].onclick = (i % 2 == 0) ?
function() {location.href = 'destino1';}:
function() {location.href = 'destino2';};
}
__________________ Por favor: No hagan preguntas de temas de foros en mensajes privados... no las respondo |
|
25/06/2004, 02:57
| |||
| |||
| No me funciona He pasado tu codigo y me da un error (se requiere un objeto) en esta linea: for (var i = 0; i < x.rows.length; i ++) Aparte de poner en la tabla id="tabla" hay que poner algun codigo mas alli? |
|
25/06/2004, 03:21
| ||||
| ||||
| Hola otra vez: Activa el código con un evento como onload del body y me dices... Es posible que no se haya generado la tabla... Saludos
__________________ Por favor: No hagan preguntas de temas de foros en mensajes privados... no las respondo |
|
25/06/2004, 06:01
| ||||
| ||||
| Hola otra vez: ¡Que raro!  Con este código me va bien en mozilla y explorer:
Código:
Y el cursor pointer es la mano que te falta...<html>
<head>
<title>
Transición
</title>
<script type="text/javascript">
var x;
function inicio() {
x = document.getElementById("tabla");
for (var i = 0; i < x.rows.length; i ++) {
x.rows[i].style.backgroundColor = (i % 2 == 0) ? "red" : "blue";
x.rows[i].style.cursor = "pointer";
x.rows[i].onmouseover = (i % 2 == 0) ?
function() {this.style.backgroundColor = 'yellow';}:
function() {this.style.backgroundColor = 'lime';};
x.rows[i].onmouseout = (i % 2 == 0) ?
function() {this.style.backgroundColor = 'red';}:
function() {this.style.backgroundColor = 'blue';};
x.rows[i].onclick = (i % 2 == 0) ?
function() {location.href = 'destino1';}:
function() {location.href = 'destino2';};
}
}
</script>
</head>
<body onload="inicio()">
<table id="tabla">
<tr>
<td>
dato
</td>
<td>
dato
</td>
<td>
dato
</td>
</tr>
<tr>
<td>
dato
</td>
<td>
dato
</td>
<td>
dato
</td>
</tr>
<tr>
<td>
dato
</td>
<td>
dato
</td>
<td>
dato
</td>
</tr>
<tr>
<td>
dato
</td>
<td>
dato
</td>
<td>
dato
</td>
</tr>
<tr>
<td>
dato
</td>
<td>
dato
</td>
<td>
dato
</td>
</tr>
</table>
</body>
</html>
Saludos
__________________ Por favor: No hagan preguntas de temas de foros en mensajes privados... no las respondo |
|
26/06/2004, 03:34
| ||||
| ||||
| Hola otra vez: Cita: Todo lo que se quiera quitar o poner, se puede hacer definitivo sin ponerlo en los eventos (onmouseover / onmouseout) y lo que se quiera cambiar con esos eventos hay que sumarlos a las funciones asociadas.
Iniciado por adrianfm esta muy bueno, ademas de iluminar la fila para cambiar el tamaño de la fuente y el color. x.rows[i].style.fontSize = "20pt"; Cambia el tamaño... (por ejemplo)Saludos
__________________ Por favor: No hagan preguntas de temas de foros en mensajes privados... no las respondo |
