Wedmasterayuda - Foro

Inteligencia Multiple WMA


    Codigo iluminar filas

    Comparte
    avatar
    wedmasterayuda
    Administrador
    Administrador

    Cantidad de envíos : 47
    Puntos : 25
    Reputación : 0
    Fecha de inscripción : 31/08/2008

    Codigo iluminar filas

    Mensaje  wedmasterayuda el Sáb Mar 14, 2009 7:18 pm

    Con este código podemos hacer que se cambie el color de fondo de las filas o columnas de una tabla, cuando pasa el ratón por encima. He añadido dos checkbox para elegir si queremos que se ilumines las filas, las columnas, las dos o ninguna.

    Habría que poner a cada etiqueta <td> la llamada a la función iluminar() pero es bastante tedioso, así que he añadido la función ini() para que haga el trabajo sucio.

    VER EJEMPLO

    Código:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Mostrar/ocultar filas y columnas</title>
    <style type="text/css">
    table {border-collapse:collapse;border:1px solid maroon;margin-left:80px}
    td {border:1px solid maroon;width:30px;text-align:center}
    </style>
    <script type="text/javascript">
    <!--
    function ini() {
      tab=document.getElementById('tabla');
      for (i=0; ele=tab.getElementsByTagName('td')[i]; i++) {
        ele.onmouseover = function() {iluminar(this,true)}
        ele.onmouseout = function() {iluminar(this,false)}
      }
    }

    function iluminar(obj,valor) {
      fila = obj.parentNode;
      if (document.getElementById('filas').checked) {
        for (i=0; ele = fila.getElementsByTagName('td')[i]; i++)
          ele.style.background = (valor) ? 'yellow' : '';
      }
         
      if (document.getElementById('columnas').checked) {
        tab=document.getElementById('tabla');
        for (i=0; ele=fila.getElementsByTagName('td')[i]; i++)
          if (ele==obj) num=i
         
        for (i=0; ele=tab.getElementsByTagName('tr')[i]; i++)
          ele.getElementsByTagName('td')[num].style.background = (valor) ? 'yellow' : '';
      }
    }
    -->
    </script>
    </head>
    <body onload="ini()">
    <p>
    Filas: <input type="checkbox" name="filas" id="filas" />
    Columnas: <input type="checkbox" id="columnas" />
    </p>
    <table id="tabla" border="1">
    <tr>
    <td>1.1</td><td>1.2</td><td>1.3</td>
    </tr>
    <tr>
    <td>2.1</td><td>2.2</td><td>2.3</td>
    </tr>
    <tr>
    <td>3.1</td><td>3.2</td><td>3.3</td>
    </tr>
    </table>
    </body>
    </html>

      Fecha y hora actual: Lun Oct 15, 2018 10:55 pm