Bordes de Tabla

lea14_9 · #1 (**permalink**) 18/02/2011, 08:31

Hola a todos. Estaba experimentando un poco con JavaScript y tablas HTML, e hice una tabla con un encabezado y luego, a las filas que hay debajo de éste, les agregué una llamada a una función JavaScript para que cuando se pase con el mouse sobre ellas se cambien de color los bordes izquierdo, derecho y el de abajo; y al salir de la fila vuelva a la normalidad. El problema es que sólo funciona bien en Firefox y no en Chrome ni en Explorer (en este caso pienso que es porque le aplico las funciones al tag <tr>). Los códigos son los siguientes:

HTML (tabla.htm):

Código HTML:

Ver original<!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>Tabla</title>
<script src="subrayar.js" type="text/javascript"></script>
</head>
<body>
<table width="400" cellspacing="0" cellpadding="2" border="1" bordercolor="#CCCCCC" frame="box" rules="rows">
  <tr height="26" align="center" valign="middle" bgcolor="#CCCCCC" style="border-bottom:#CCCCCC">
    <th>Nombre</th>
    <th>Edad</th>
    <th>Peso</th>
    <th>Altura</th>
  </tr>
  <tr height="28" align="center" valign="middle" onmouseover="subrayar_over(this)" onmouseout="subrayar_out(this)">
    <td><strong>Juan</strong></td>
    <td>44</td>
    <td>82 Kg.</td>
    <td>1.70 Mts.</td>
  </tr>
  <tr height="28" align="center" valign="middle" onmouseover="subrayar_over(this)" onmouseout="subrayar_out(this)">
    <td><strong>Jos&eacute;</strong></td>
    <td>39</td>
    <td>77 Kg.</td>
    <td>1.65 Mts.</td>
  </tr>
  <tr height="28" align="center" valign="middle" onmouseover="subrayar_over(this)" onmouseout="subrayar_out(this)">
    <td><strong>Liliana</strong></td>
    <td>58</td>
    <td>80 Kg.</td>
    <td>1.68 Mts.</td>
  </tr>
  <tr height="28" align="center" valign="middle" onmouseover="subrayar_over(this)" onmouseout="subrayar_out(this)">
    <td><strong>Omar</strong></td>
    <td>43</td>
    <td>82Kg.</td>
    <td>1.65 Mts.</td>
  </tr>
  <tr height="28" align="center" valign="middle" onmouseover="subrayar_over(this)" onmouseout="subrayar_out(this)">
    <td><strong>Luis</strong></td>
    <td>35</td>
    <td>70 Kg.</td>
    <td>1.60 Mts.</td>
  </tr>
  <tr height="28" align="center" valign="middle" onmouseover="subrayar_over(this)" onmouseout="subrayar_out(this)">
    <td><strong>Felisa</strong></td>
    <td>45</td>
    <td>76 Kg.</td>
    <td>158 Mts.</td>
  </tr>
</table>
</body>
</html>

JavaScript (subrayar.js):

Código Javascript:

Ver originalfunction subrayar_over(fila){
  fila.style.borderBottom="solid 1px #09F";
  fila.style.borderRight="solid 1px #09F";
  fila.style.borderLeft="solid 1px #09F";
}
function subrayar_out(fila){
  fila.style.borderBottom="solid 1px #CCC";
  fila.style.borderRight="solid 1px #CCC";
  fila.style.borderLeft="solid 1px #CCC";
}

Bueno si alguien me puede dar una mano se lo agradezco. Saludos.

maycolalvarez · #2 (**permalink**) 18/02/2011, 12:26

¿no te parece más practico utilizar CSS?:

Código CSS:

Ver originaltable tr {
/*estilo por defecto*/
}
table tr:hover {
/*estilo al posar el mouse*/
}

PD: la propiedad bgcolor está obsoleta

lea14_9 · #3 (**permalink**) 18/02/2011, 12:39

Bueno. Gracias maycolalvarez.

Corregí la línea 10 por lo de bgcolor y me quedó así:
<tr height="26" align="center" valign="middle" style="border-bottom:#CCCCCC; background:#CCCCCC;">

En cuanto al CSS lo probé y no funciona en Explorer, pero sí en Chrome. Asique ahora el problema sigue siendo el bendito Explorer.

lea14_9 · #4 (**permalink**) 09/03/2011, 15:01

Buneo. Probé otra vez la página en IE, Firefox y Chrome y anda en todos igual. Asique todo bien.

ArturoGallegos · #5 (**permalink**) 09/03/2011, 18:10

Cita:

Iniciado por lea14_9

En cuanto al CSS lo probé y no funciona en Explorer, pero sí en Chrome. Asique ahora el problema sigue siendo el bendito Explorer.

el css funciona en IE6 o superior, debiste haber probado en algo muy precario para que tenga una version anterior del IE6

o accidentalmente lo probaste sin haber declarado un doctype, usar javascript para dicha acción es demasiado tosca no crees?

prueba una ves mas con el CSS y si te falla muéstranos el código que usas para el efecto mediante CSS y te ayudaremos