Tema: Bordes de Tabla
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 18/02/2011, 08:31
lea14_9
 
Fecha de Ingreso: febrero-2011
Mensajes: 12
Antigüedad: 13 años, 3 meses
Puntos: 0
Bordes de Tabla
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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Tabla</title>
  6. <script src="subrayar.js" type="text/javascript"></script>
  7. </head>
  8. <body>
  9. <table width="400" cellspacing="0" cellpadding="2" border="1" bordercolor="#CCCCCC" frame="box" rules="rows">
  10.   <tr height="26" align="center" valign="middle" bgcolor="#CCCCCC" style="border-bottom:#CCCCCC">
  11.     <th>Nombre</th>
  12.     <th>Edad</th>
  13.     <th>Peso</th>
  14.     <th>Altura</th>
  15.   </tr>
  16.   <tr height="28" align="center" valign="middle" onmouseover="subrayar_over(this)" onmouseout="subrayar_out(this)">
  17.     <td><strong>Juan</strong></td>
  18.     <td>44</td>
  19.     <td>82 Kg.</td>
  20.     <td>1.70 Mts.</td>
  21.   </tr>
  22.   <tr height="28" align="center" valign="middle" onmouseover="subrayar_over(this)" onmouseout="subrayar_out(this)">
  23.     <td><strong>Jos&eacute;</strong></td>
  24.     <td>39</td>
  25.     <td>77 Kg.</td>
  26.     <td>1.65 Mts.</td>
  27.   </tr>
  28.   <tr height="28" align="center" valign="middle" onmouseover="subrayar_over(this)" onmouseout="subrayar_out(this)">
  29.     <td><strong>Liliana</strong></td>
  30.     <td>58</td>
  31.     <td>80 Kg.</td>
  32.     <td>1.68 Mts.</td>
  33.   </tr>
  34.   <tr height="28" align="center" valign="middle" onmouseover="subrayar_over(this)" onmouseout="subrayar_out(this)">
  35.     <td><strong>Omar</strong></td>
  36.     <td>43</td>
  37.     <td>82Kg.</td>
  38.     <td>1.65 Mts.</td>
  39.   </tr>
  40.   <tr height="28" align="center" valign="middle" onmouseover="subrayar_over(this)" onmouseout="subrayar_out(this)">
  41.     <td><strong>Luis</strong></td>
  42.     <td>35</td>
  43.     <td>70 Kg.</td>
  44.     <td>1.60 Mts.</td>
  45.   </tr>
  46.   <tr height="28" align="center" valign="middle" onmouseover="subrayar_over(this)" onmouseout="subrayar_out(this)">
  47.     <td><strong>Felisa</strong></td>
  48.     <td>45</td>
  49.     <td>76 Kg.</td>
  50.     <td>158 Mts.</td>
  51.   </tr>
  52. </table>
  53. </body>
  54. </html>

JavaScript (subrayar.js):
Código Javascript: 
Ver original
  1. function subrayar_over(fila){
  2.   fila.style.borderBottom="solid 1px #09F";
  3.   fila.style.borderRight="solid 1px #09F";
  4.   fila.style.borderLeft="solid 1px #09F";
  5. }
  6. function subrayar_out(fila){
  7.   fila.style.borderBottom="solid 1px #CCC";
  8.   fila.style.borderRight="solid 1px #CCC";
  9.   fila.style.borderLeft="solid 1px #CCC";
  10. }

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