Foros del Web » Programando para Internet » Javascript »

area de repeticion, no se como hacerlo

 Estas en el tema de area de repeticion, no se como hacerlo en el foro de Javascript en Foros del Web. Hola Amigos, me he metido en un lio que no se como salir. Tengo una tabla de 20 elementos con un link para cada uno, ...
  #1 (permalink)  
Antiguo 03/09/2014, 08:15
 
Fecha de Ingreso: abril-2014
Mensajes: 19
Antigüedad: 10 años
Puntos: 0
area de repeticion, no se como hacerlo
Hola Amigos, me he metido en un lio que no se como salir.

Tengo una tabla de 20 elementos con un link para cada uno, este link abre un popup donde se carga un jpg y la opción de descarga de un pdf.
No se como hacer para que cuando se haga click en el link correspondiente al 2, se envié esa información y se cambie en el div modal el 1.jpg por 2.jpg, asi este carga esa informacion. y asi mismo deberia hacer con los 20 items


Código HTML:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>

<body>
<table border="0" cellpadding="3" cellspacing="0" id="flattab" width="640">
<tbody>
  <tr>
    <td><strong>APPARTAMENTO</strong></td>
    <td><strong>LOCALI</strong></td>
    <td><strong>SUL/m<sup>2</sup>*</strong></td>
    <td><strong>TERRAZZA</strong></td>
    <td><strong>GIARDINO</strong></td>
    <td><strong>PREZZO</strong></td>
    <td><strong>SCHEDA PDF</strong></td>
  </tr>
  <tr class="rowog">
    <td colspan="7"><strong>Piano terra</strong></td>
    </tr>
  <tr class="rowog" data-ogid="01">
    <td>1</td>
    <td>4½ - 5½</td>
    <td>127,50 m<sup>2</sup> </td>
    <td>45 m<sup>2</sup></td>
    <td>60 m<sup>2</sup></td>
    <td>790.000 - Chf</td>
    <!-- en este caso deberia enviar a la div modal el numero 1 -->
    <td align="right"><a href="#modal" class="btn go"><img src="../images/pdf_icon.gif" /></a></td>
  </tr>
    <tr class="rowog" data-ogid="02">
    <td>2</td>
    <td>4½ - 5½</td>
    <td>125,00 m<sup>2</sup></td>
    <td>40 m<sup>2</sup></td>
    <td>20 m<sup>2</sup></td>
    <td>750.000 - Chf</td>
     <!-- en este caso deberia enviar a la div modal el numero 2 -->
    <td align="right"><a href="#modal" class="btn go"><img src="../images/pdf_icon.gif" /></a></td>
  </tr>
    <tr class="rowog" data-ogid="03">
    <td>3</td>
    <td>3½</td>
    <td>92,50 m<sup>2</sup></td>
    <td>40 m<sup>2</sup></td>
    <td>20 m<sup>2</sup></td>
    <td>585.000 - Chf</td>
     <!-- en este caso deberia enviar a la div modal el numero 3 -->
    <td align="right"><a href="#modal" class="btn go"><img src="../images/pdf_icon.gif" /></a></td>
  </tr>
</tbody></table>
  
<!-- -->
<div id="modal">
<div class="modal-content">
<div class="header"><h2><table border="0" cellspacing="5" width="100%">
  <tr>
  <!-- aqui esta el numero 1 (1.pdf), pero la proxima sera el 2 y asi sucesivamente -->
    <td align="left"><a href="1.pdf"><img src="../images/download.png" width="23" height="23" /></a></td>
    <td align="center"><a id="previousLink" href="#"><img src="../images/forward.png" width="23" height="23" /></a></td>
    <td align="right"><a href="#" class="btn"><img src="../images/close.png" width="23" height="23" /></a></td>
  </tr>
</table></h2></div>
    
<div class="copy">
 <!-- aqui esta el numero 1 (1.jpg), pero la proxima sera el 2 y asi sucesivamente -->
<img src="img/photos/1.jpg" width="732px"  />
</div></div></div>

</body>
  #2 (permalink)  
Antiguo 03/09/2014, 12:32
Avatar de jvier  
Fecha de Ingreso: septiembre-2014
Mensajes: 106
Antigüedad: 9 años, 7 meses
Puntos: 6
Respuesta: area de repeticion, no se como hacerlo
Haber si entendi... checa esto...
Código HTML: 
Ver original
  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <title>test</title>
  4. </head>
  5.  
  6. <body>
  7. <table border="0" cellpadding="3" cellspacing="0" id="flattab" width="640">
  8. <tbody>
  9.   <tr>
  10.     <td><strong>APPARTAMENTO</strong></td>
  11.     <td><strong>LOCALI</strong></td>
  12.     <td><strong>SUL/m<sup>2</sup>*</strong></td>
  13.     <td><strong>TERRAZZA</strong></td>
  14.     <td><strong>GIARDINO</strong></td>
  15.     <td><strong>PREZZO</strong></td>
  16.     <td><strong>SCHEDA PDF</strong></td>
  17.   </tr>
  18.   <tr class="rowog">
  19.     <td colspan="7"><strong>Piano terra</strong></td>
  20.     </tr>
  21.   <tr class="rowog" data-ogid="01">
  22.     <td>1</td>
  23.     <td>4½ - 5½</td>
  24.     <td>127,50 m<sup>2</sup> </td>
  25.     <td>45 m<sup>2</sup></td>
  26.     <td>60 m<sup>2</sup></td>
  27.     <td>790.000 - Chf</td>
  28.     <!-- en este caso deberia enviar a la div modal el numero 1 AQUI TE VA UNA SOLUCION CON EL ATRIBUTO DATA-->
  29.     <td align="right"><a href="#modal" class="btn go" data-pdf="1.pdf"><img src="../images/pdf_icon.gif" /></a></td>
  30.   </tr>
  31.     <tr class="rowog" data-ogid="02">
  32.     <td>2</td>
  33.     <td>4½ - 5½</td>
  34.     <td>125,00 m<sup>2</sup></td>
  35.     <td>40 m<sup>2</sup></td>
  36.     <td>20 m<sup>2</sup></td>
  37.     <td>750.000 - Chf</td>
  38.      <!-- en este caso deberia enviar a la div modal el numero 2 -->
  39.     <td align="right"><a href="#modal" class="btn go"><img src="../images/pdf_icon.gif" /></a></td>
  40.   </tr>
  41.     <tr class="rowog" data-ogid="03">
  42.     <td>3</td>
  43.     <td>3½</td>
  44.     <td>92,50 m<sup>2</sup></td>
  45.     <td>40 m<sup>2</sup></td>
  46.     <td>20 m<sup>2</sup></td>
  47.     <td>585.000 - Chf</td>
  48.      <!-- en este caso deberia enviar a la div modal el numero 3 -->
  49.     <td align="right"><a href="#modal" class="btn go"><img src="../images/pdf_icon.gif" /></a></td>
  50.   </tr>
  51. </tbody></table>
  52.   
  53. <!-- -->
  54. <div id="modal">
  55. <div class="modal-content">
  56. <div class="header"><h2><table border="0" cellspacing="5" width="100%">
  57.   <tr>
  58.   <!-- aqui esta el numero 1 (1.pdf), pero la proxima sera el 2 y asi sucesivamente -->
  59.     <td align="left"><a href="1.pdf" id="link_pdf"><img src="../images/download.png" width="23" height="23" /></a></td>
  60.     <td align="center"><a id="previousLink" href="#"><img src="../images/forward.png" width="23" height="23" /></a></td>
  61.     <td align="right"><a href="#" class="btn"><img src="../images/close.png" width="23" height="23" /></a></td>
  62.   </tr>
  63. </table></h2></div>
  64.     
  65. <div class="copy">
  66.  <!-- aqui esta el numero 1 (1.jpg), pero la proxima sera el 2 y asi sucesivamente -->
  67. <img src="img/photos/1.jpg" width="732px"  />
  68. </div></div></div>
  69. <!-- USA JQUERY-->
  70. <script>
  71. $(".go").click(function(){
  72. $("#link_pdf").attr("href",$(this).data("pdf"));
  73. });
  74. </script>
  75. </body>

Le hice unos pequeños agregados a tu estructura, revisalo y lo aplicas a toda la tabla, y haber que tal funciona

Saludos!
__________________
Me gusta desarrollar aplicaciones para Android, y me considero bueno para el PHP, Javascript y el AS3.

AH! y agradezco puntitos jeje (si mis respuestas te ayudan).

Etiquetas: area, hacerlo, html, repeticion
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 10:48.