Tema: ocultar divs desde un check box de una tabla html
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 01/05/2014, 18:11
jmm87
 
Fecha de Ingreso: octubre-2012
Mensajes: 202
Antigüedad: 12 años, 4 meses
Puntos: 0
ocultar divs desde un check box de una tabla html
hola buen dia. primo muestro lo que tengo y despues describo lo que necesito

HTML
Código HTML: 
Ver original
  1. <table id="resultado">
  2.                         <tr>
  3.                             <th>Ver</th>
  4.                             <th>Id</th>
  5.                             <th>Codigo</th>
  6.                             <th>Descripcion</th>
  7.                             <th>Familia</th>
  8.                             <th>Marca</th>
  9.                             <th>Precio</th>
  10.                         </tr>
  11.                         <!--FIN CABECERA TABLA-->
  12.                         <tbody>
  13.                             <tr>
  14.                                 <!--Ejemplos-->
  15.                                 <td><input type="checkbox" name="check" id="check" value="1" onchange="javascript:mostrarContenido()" /></td>
  16.                                 <td>1</td>
  17.                                 <td>1600</td>
  18.                                 <td>Heladera con freezer blanca 328 Lts, Alt:  166cm - Ancho:   63cm - Prof:  62cm</td>
  19.                                 <td>Refrigeracion</td>
  20.                                 <td>Bambi</td>
  21.                                 <td>5400</td>
  22.                             </tr>
  23.                             <tr>
  24.                                 <!--Ejemplos-->
  25.                                 <td><input type="checkbox" name="check" id="check" value="1" onchange="javascript:mostrarContenido()" /></td>
  26.                                 <td>2</td>
  27.                                 <td>4100</td>
  28.                                 <td>Frezzer 4100 litros</td>
  29.                                 <td>Refrigeracion</td>
  30.                                 <td>Bambi</td>
  31.                                 <td>7100</td>           
  32.                             </tr>
  33.                             <tr>
  34.                                 <!--Ejemplos-->
  35.                                 <td><input type="checkbox" name="check" id="check" value="1" onchange="javascript:mostrarContenido()" /></td>
  36.                                 <td>3</td>
  37.                                 <td>280</td>
  38.                                 <td>Heladera 280 litros</td>
  39.                                 <td>Refrigeracion</td>
  40.                                 <td>Neba</td>
  41.                                 <td>3800</td>           
  42.                             </tr>
  43.                             <tr>
  44.                                 <!--Ejemplos-->
  45.                                 <td><input type="checkbox" name="check" id="check" value="1" onchange="javascript:mostrarContenido()" /></td>
  46.                                 <td>4</td>
  47.                                 <td>SAS5500</td>
  48.                                 <td>Televisor 42" smart</td>
  49.                                 <td>Televisores</td>
  50.                                 <td>Samasung</td>
  51.                                 <td>8100</td>           
  52.                             </tr>
  53.                             <tr>
  54.                                 <!--Ejemplos-->
  55.                                 <td><input type="checkbox" name="check" id="check" value="1" onchange="javascript:mostrarContenido()" /></td>
  56.                                 <td>5</td>
  57.                                 <td>SAS5500</td>
  58.                                 <td>Televisor 42" smart</td>
  59.                                 <td>Televisores</td>
  60.                                 <td>Samasung</td>
  61.                                 <td>8100</td>           
  62.                             </tr>
  63.                             <tr>
  64.                                 <!--Ejemplos-->
  65.                                 <td><input type="checkbox" name="check" id="check" value="1" onchange="javascript:mostrarContenido()" /></td>
  66.                                 <td>6</td>
  67.                                 <td>SAS5500</td>
  68.                                 <td>Televisor 42" smart</td>
  69.                                 <td>Televisores</td>
  70.                                 <td>Samasung</td>
  71.                                 <td>8100</td>           
  72.                             </tr>
  73.                             <tr>
  74.                                 <!--Ejemplos-->
  75.                                 <td><input type="checkbox" name="check" id="check" value="1" onchange="javascript:mostrarContenido()" /></td>
  76.                                 <td>7</td>
  77.                                 <td>SAS5500</td>
  78.                                 <td>Televisor 42" smart</td>
  79.                                 <td>Televisores</td>
  80.                                 <td>Samasung</td>
  81.                                 <td>8100</td>           
  82.                             </tr>
  83.                             <tr>
  84.                                 <!--Ejemplos-->
  85.                                 <td><input type="checkbox" name="check" id="check" value="1" onchange="javascript:mostrarContenido()" /></td>
  86.                                 <td>8</td>
  87.                                 <td>4100</td>
  88.                                 <td>Frezzer 4100 litros</td>
  89.                                 <td>Refrigeracion</td>
  90.                                 <td>Bambi</td>
  91.                                 <td>7100</td>           
  92.                             </tr>
  93.                             <tr>
  94.                                 <!--Ejemplos-->
  95.                                 <td><input type="checkbox" name="check" id="check" value="1" onchange="javascript:mostrarContenido()" /></td>
  96.                                 <td>9</td>
  97.                                 <td>280</td>
  98.                                 <td>Heladera 280 litros</td>
  99.                                 <td>Refrigeracion</td>
  100.                                 <td>Neba</td>
  101.                                 <td>7200</td>
  102.                             </tr>   
  103.                             <tr>
  104.                                 <!--Ejemplos-->
  105.                                 <td><input type="checkbox" name="check" id="check" value="1" onchange="javascript:mostrarContenido()" /></td>
  106.                                 <td>9</td>
  107.                                 <td>SAS5500</td>
  108.                                 <td>Televisor 42" smart</td>
  109.                                 <td>Televisores</td>
  110.                                 <td>Samasung</td>
  111.                                 <td>8100</td>           
  112.                             </tr>
  113.                             <tr>
  114.                                 <!--Ejemplos-->
  115.                                 <td><input type="checkbox" name="check" id="check" value="1" onchange="javascript:mostrarContenido()" /></td>
  116.                                 <td>10</td>
  117.                                 <td>4100</td>
  118.                                 <td>Frezzer 4100 litros</td>
  119.                                 <td>Refrigeracion</td>
  120.                                 <td>Bambi</td>
  121.                                 <td>7100</td>           
  122.                             </tr>
  123.                             <tr>
  124.                                 <!--Ejemplos-->
  125.                                 <td><input type="checkbox" name="check" id="check" value="1" onchange="javascript:mostrarContenido()" /></td>
  126.                                 <td>11</td>
  127.                                 <td>280</td>
  128.                                 <td>Heladera 280 litros</td>
  129.                                 <td>Refrigeracion</td>
  130.                                 <td>Neba</td>
  131.                                 <td>7200</td>
  132.                             </tr>
  133.                             <tr>
  134.                                 <!--Ejemplos-->
  135.                                 <td><input type="checkbox" name="check" id="check" value="1" onchange="javascript:mostrarContenido()" /></td>
  136.                                 <td>12</td>
  137.                                 <td>SAS5500</td>
  138.                                 <td>Televisor 42" smart</td>
  139.                                 <td>Televisores</td>
  140.                                 <td>Samasung</td>
  141.                                 <td>8100</td>           
  142.                             </tr>                       
  143.                         </tbody>
  144.                         <!--FIN CONTENIDO TABLA-->
  145.                     </table>

JAVASCRIPT

Código Javascript: 
Ver original
  1. //Mostrar el contenido de la visualizacion del producto
  2. function mostrarContenido() {
  3.     oculto = document.getElementById("oculto");
  4.     alerta= document.getElementById("alerta");
  5.     error= document.getElementById("error");
  6.     advertencia= document.getElementById("advertencia");
  7.     check = document.getElementById("check");
  8.     
  9.     if (check.checked) {
  10.         oculto.style.display='block';
  11.         alerta.style.display='block';
  12.         advertencia.style.display='none';
  13.     }
  14.     else {
  15.         advertencia.style.display='block';
  16.         oculto.style.display='none';
  17.         alerta.style.display='none';
  18.     }
  19. }

ESTO ME FUNCIONA PERFECTO. PERO SOLO CON EL PRIMER LINK
LO QUE YO NECESITARIA ES QUE EL ID Y EL NOMBRE DE CADA INPUT SE VALLA INCREMENTANDO A MEDIDA QUE SE ENCUENTRE UNA NUEVA FILA Y DE ALGUNA MANERA DECIR COMO JAVACRIPT QUE ESTA RESPONDIENDO A ESA FILA. PORQUE AHORA EL CHECK BOX RESPONDE SIEMPRE AL MISMO DIV CON EL MISMO CONTENIDO

ESPERO RESPUESTA GRACIAS!!