Wedmasterayuda - Foro

Inteligencia Multiple WMA


    Codigo agregar o quitar columna o filas

    Comparte
    avatar
    wedmasterayuda
    Administrador
    Administrador

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

    Codigo agregar o quitar columna o filas

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

    Si tenemos una tabla con muchas filas y columnas es posible que no queramos que se vea entera en la pantalla. Con las funciones que veremos a continuación se pueden mostrar y ocultar tanto filas como columnas.

    Para empezar pondremos un id a la tabla para poder actuar sobre ella: <table id="tabla">

    La primera función, que muestra/oculta las filas se llama con ocultarFila(num,ver) num indica el número de fila (recordar que la primera es cero) y ver indica que queremos hacer con la fila (true=mostrar, false=ocultar). Esta función es bastante sencilla, lo que hace es buscar todos los elementos tr y darle el estilo apropiado al que nos interesa:

    VER EJEMPLO

    Código:
    function ocultarFila(num,ver) {
      dis= ver ? '' : 'none';
      tab=document.getElementById('tabla');
      tab.getElementsByTagName('tr')[num].style.display=dis;
    }

    La otra función es ocultarColumna(num,ver) Los parámetros ya los conoceis. Esta función es un poco más compleja porque hay que recorrer todos los elementos tr y en cada uno de ellos dar el estilo que nos interesa al número que hemos pasado a la función:


    VER EJEMPLO

    Código:
    function ocultarColumna(num,ver) {
      dis= ver ? '' : 'none';
      fila=document.getElementById('tabla').getElementsByTagName('tr');
      for(i=0;i<fila.length;i++)
        fila[i].getElementsByTagName('td')[num].style.display=dis;
    }


    Para terminar pondré el código completo, para los aficionados al copy&paste y también podreis ver el ejemplo en funcionamiento.

    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}
    input {background:silver; border:1px solid maroon;width:100px;margin:5px}
    </style>
    <script type="text/javascript">
    <!--
    function ocultarFila(num,ver) {
      dis= ver ? '' : 'none';
      tab=document.getElementById('tabla');
      tab.getElementsByTagName('tr')[num].style.display=dis;
    }
    function ocultarColumna(num,ver) {
      dis= ver ? '' : 'none';
      fila=document.getElementById('tabla').getElementsByTagName('tr');
      for(i=0;i<fila.length;i++)
        fila[i].getElementsByTagName('td')[num].style.display=dis;
    }
    -->
    </script>
    </head>
    <body>
    <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>
    <p><input type="button" value="Quitar fila" onclick="ocultarFila(1,false)" />
    <input type="button" value="Poner fila" onclick="ocultarFila(1,true)" />
    <br />
    <input type="button" value="Quitar columna" onclick="ocultarColumna(1,false)" />
    <input type="button" value="Poner columna" onclick="ocultarColumna(1,true)" /></p>
    </body>
    </html>

      Fecha y hora actual: Lun Jun 25, 2018 7:01 pm