Ver Mensaje Individual
  #1 (permalink)  
Antiguo 10/03/2012, 19:55
panchompc
 
Fecha de Ingreso: diciembre-2011
Ubicación: Chile
Mensajes: 36
Antigüedad: 12 años, 11 meses
Puntos: 2
¿Como ocultar algunas filas de una tabla?

hola!

Necesito algo de orientacion para poder ocultar algunas filas de una tabla., especificamente, es un formulario en la cual solicito informacion de su familia, hice 10 campos para este fin, pero quiero mostrar solo 3 y poner un boton para que muestre el resto de las filas, en caso de que el usuario necesite mas campos.

Aclaro que de javascript soy novato, trate de adaptar algunas soluciones que encontre en internet pero solo funcionan en caso de 1 fila, no de 7 (que es mi caso)

adjunto lo que llevo hasta el momento:

Código Javascript:
Ver original
  1. function displayRow(){  
  2.     var row = document.getElementById("captionRow");
  3.     for (i=0; i<row.Count; i++){
  4.         if (row[i].style.display == '')  row[i].style.display = 'none';    
  5.         else row[i].style.display = ''; }
  6.     }

(si le quito el for, funciona con una fila, pero tal como esta no funcioan con ninguna :( )

aca, parte de la tabla:

Código HTML:
Ver original
  1. <tr>
  2.             <td>&nbsp;</td>
  3.             <td><strong>Cargas familiares:</strong></td>
  4.             <td>&nbsp;</td>
  5.             <td>&nbsp;</td>
  6.             <td>&nbsp;</td>
  7.             <td>&nbsp;</td>
  8.           </tr>
  9.           <tr>
  10.             <td>&nbsp;</td>
  11.             <td>&nbsp;Sexo</td>
  12.             <td>&nbsp;</td>
  13.             <td>&nbsp;Fecha Nacimiento</td>
  14.             <td>&nbsp;&nbsp;&nbsp;Rut</td>
  15.             <td>&nbsp;</td>
  16.           </tr>
  17.           <tr>
  18.             <td>1</td>
  19.             <td>
  20.             <select name="Scargas" id="Scargas">
  21.             <option value="">Seleccione una opción</option>
  22.             <option value="Hombre">Hombre</option>
  23.             <option value="Mujer">Mujer</option>
  24.             </select>
  25.             </td>
  26.             <td>&nbsp;</td>
  27.             <td><input type="text" name="nacimiento" id="nacimiento2" /></td>
  28.             <td><input type="text" name="strRut1" id="rut" /></td>
  29.             <td>&nbsp;</td>
  30.           </tr>
  31.           <tr>
  32.             <td>2</td>
  33.             <td><select name="Scargas2" id="Scargas">
  34.               <option value="">Seleccione una opción</option>
  35.               <option value="Hombre">Hombre</option>
  36.               <option value="Mujer">Mujer</option>
  37.             </select></td>
  38.             <td>&nbsp;</td>
  39.             <td><input type="text" name="nacimiento2" id="nacimiento3" /></td>
  40.             <td><input type="text" name="strRut2" id="rut" /></td>
  41.             <td>&nbsp;</td>
  42.           </tr>
  43.           <tr>
  44.             <td>3</td>
  45.             <td><select name="Scargas3" id="Scargas">
  46.               <option value="">Seleccione una opción</option>
  47.               <option value="Hombre">Hombre</option>
  48.               <option value="Mujer">Mujer</option>
  49.             </select></td>
  50.             <td>&nbsp;</td>
  51.             <td><input type="text" name="nacimiento3" id="nacimiento4" /></td>
  52.             <td><input type="text" name="strRut3" id="rut" /></td>
  53.             <td>&nbsp;</td>
  54.           </tr>
  55.           <tr>
  56.             <td>&nbsp;</td>
  57.             <td> </td>
  58.             <td>&nbsp;</td>
  59.             <td>&nbsp;</td>
  60.             <td>&nbsp;</td>
  61.             <td>&nbsp;</td>
  62.           </tr>
  63.           <tr id="captionRow">
  64.             <td>4</td>
  65.             <td><select name="Scargas4" id="Scargas">
  66.               <option value="">Seleccione una opción</option>
  67.               <option value="Hombre">Hombre</option>
  68.               <option value="Mujer">Mujer</option>
  69.             </select></td>
  70.             <td>&nbsp;</td>
  71.             <td><input type="text" name="nacimiento4" id="nacimiento5" /></td>
  72.             <td><input type="text" name="strRut4" id="rut" /></td>
  73.             <td>&nbsp;</td>
  74.           </tr>
  75.           <tr id="captionRow">
  76.             <td>5</td>
  77.             <td><select name="Scargas5" id="Scargas">
  78.               <option value="">Seleccione una opción</option>
  79.               <option value="Hombre">Hombre</option>
  80.               <option value="Mujer">Mujer</option>
  81.             </select></td>
  82.             <td>&nbsp;</td>
  83.             <td><input type="text" name="nacimiento5" id="nacimiento6" /></td>
  84.             <td><input type="text" name="strRut5" id="rut" /></td>
  85.             <td>&nbsp;</td>
  86.           </tr>
  87.           <tr id="captionRow">
  88.             <td>6</td>
  89.             <td><select name="Scargas6" id="Scargas">
  90.               <option value="">Seleccione una opción</option>
  91.               <option value="Hombre">Hombre</option>
  92.               <option value="Mujer">Mujer</option>
  93.             </select></td>
  94.             <td>&nbsp;</td>
  95.             <td><input type="text" name="nacimiento6" id="nacimiento7" /></td>
  96.             <td><input type="text" name="strRut6" id="rut" /></td>
  97.             <td>&nbsp;</td>
  98.           </tr>
  99.           <tr id="captionRow">
  100.             <td>7</td>
  101.             <td><select name="Scargas7" id="Scargas">
  102.               <option value="">Seleccione una opción</option>
  103.               <option value="Hombre">Hombre</option>
  104.               <option value="Mujer">Mujer</option>
  105.             </select></td>
  106.             <td>&nbsp;</td>
  107.             <td><input type="text" name="nacimiento7" id="nacimiento8" /></td>
  108.             <td><input type="text" name="strRut7" id="rut" /></td>
  109.             <td>&nbsp;</td>
  110.           </tr>
  111.           <tr id="captionRow">
  112.             <td>8</td>
  113.             <td><select name="Scargas8" id="Scargas">
  114.               <option value="">Seleccione una opción</option>
  115.               <option value="Hombre">Hombre</option>
  116.               <option value="Mujer">Mujer</option>
  117.             </select></td>
  118.             <td>&nbsp;</td>
  119.             <td><input type="text" name="nacimiento8" id="nacimiento9" /></td>
  120.             <td><input type="text" name="strRut8" id="rut" /></td>
  121.             <td>&nbsp;</td>
  122.           </tr>
  123.           <tr id="captionRow">
  124.             <td>9</td>
  125.             <td><select name="Scargas9" id="Scargas">
  126.               <option value="">Seleccione una opción</option>
  127.               <option value="Hombre">Hombre</option>
  128.               <option value="Mujer">Mujer</option>
  129.             </select></td>
  130.             <td>&nbsp;</td>
  131.             <td><input type="text" name="nacimiento9" id="nacimiento10" /></td>
  132.             <td><input type="text" name="strRut9" id="rut" /></td>
  133.             <td>&nbsp;</td>
  134.           </tr>
  135.           <tr id="captionRow">
  136.             <td>10</td>
  137.             <td><select name="Scargas10" id="Scargas">
  138.               <option value="">Seleccione una opción</option>
  139.               <option value="Hombre">Hombre</option>
  140.               <option value="Mujer">Mujer</option>
  141.             </select></td>
  142.             <td>&nbsp;</td>
  143.             <td><input type="text" name="nacimiento10" id="nacimiento11" /></td>
  144.             <td><input type="text" name="strRut10" id="rut" /></td>
  145.             <td>&nbsp;</td>
  146.           </tr>

cualquier sugerencia es bienvenida :D