Tema: mover filas entre dos tablas (agregar y eliminar)
Ver Mensaje Individual
  #8 (permalink)  
Antiguo 03/04/2013, 08:20
jjeshuacm1
 
Fecha de Ingreso: septiembre-2012
Mensajes: 73
Antigüedad: 12 años, 2 meses
Puntos: 0
Pregunta eliminar filas creadas dinamicamente
hola a todos , espero me puedan ayudar un poco.. tengo un listado que se carga con registro de la base de datos, cada fila tiene un boton de añadir, la cual ejecuta una funcion javascript la cual manda dicha fila y la crea en una segunda tabla y esta desaparece de la primera/ y la añade un boton de eliminar por cada fila creada. hasta los momentos esto me funciona correctamente ahora mi problema es que necesito que en el boton de eliminar al darle click me elimine esa fila de la segunda tabla, y aparezca de nuevo en la primera. eh intentado por muchos medios. y algo relacionado con que tengo que ver la clase padre, pero no lo comprendo no c mucho de javascript espero puedan ayudarme, este es el codigo que tengo por los momentos

Código HTML: 
Ver original
  1. <script type="text/javascript">
  2. function añadirFilas(a,b,c,d,e,f,g,h,i,j){
  3. // optenemos los valores que estan de tu primera tabla...
  4.   var valor1=a;
  5.   var valor2=b;
  6.   var valor3=c;
  7.   var valor4=d;
  8.   var valor5=e;
  9.   var valor6=f;
  10.    var valor7=g;
  11.   var valor8=h;
  12.   var valor9=i;
  13.   var valor10=j;
  14. // optenemos el id de tu segunda tabla y creamos los <tr> y <td> necesarios...
  15.   var tabla2=document.getElementById('tabla2');
  16.   var tr=document.createElement('tr');
  17.    var td0=document.createElement('td');
  18.   var td1=document.createElement('td');
  19.   var td2=document.createElement('td');
  20.   var td3=document.createElement('td');
  21.   var td4=document.createElement('td');
  22.   var td5=document.createElement('td');
  23.   var td6=document.createElement('td');
  24.   var td7=document.createElement('td');
  25.   var td8=document.createElement('td');
  26.   var td9=document.createElement('td');
  27.    var td10=document.createElement('td');
  28. //agregamos los valores de tu primera tabla a los <td> creados..
  29.   td0.innerHTML= '<input type="button" value="Cancelar">';
  30.   td1.innerHTML=valor1;
  31.   td2.innerHTML=valor2;
  32.   td3.innerHTML=valor3;
  33.   td4.innerHTML=valor4;
  34.   td5.innerHTML=valor5;
  35.   td6.innerHTML=valor6;
  36.    td7.innerHTML=valor7;
  37.   td8.innerHTML=valor8;
  38.   td9.innerHTML=valor9;
  39.    td10.innerHTML=valor10;
  40. // agregamos los <td> al <tr>..
  41.   tr.appendChild(td0);
  42.   tr.appendChild(td1);
  43.   tr.appendChild(td2);
  44.   tr.appendChild(td3);
  45.  tr.appendChild(td4);
  46.   tr.appendChild(td5);
  47.   tr.appendChild(td6);
  48.   tr.appendChild(td7);
  49.   tr.appendChild(td8);
  50.   tr.appendChild(td9);
  51.    tr.appendChild(td10);
  52.   
  53. // agregamos el <tr> a tu segunda tabla
  54.   tabla2.appendChild(tr);
  55.  
  56. }
  57. function eliminarFilas(a,b,c,d,e,f,g,h,i,j){
  58. // optenemos los valores que estan de tu primera tabla...
  59.   var valor1=a;
  60.   var valor2=b;
  61.   var valor3=c;
  62.   var valor4=d;
  63.   var valor5=e;
  64.   var valor6=f;
  65.    var valor7=g;
  66.   var valor8=h;
  67.   var valor9=i;
  68.   var valor10=j;
  69. // optenemos el id de tu segunda tabla y creamos los <tr> y <td> necesarios...
  70.   var tabla2=document.getElementById('tabla2');
  71.   var tr=document.createElement('tr');
  72.    var td0=document.createElement('td');
  73.   var td1=document.createElement('td');
  74.   var td2=document.createElement('td');
  75.   var td3=document.createElement('td');
  76.   var td4=document.createElement('td');
  77.   var td5=document.createElement('td');
  78.   var td6=document.createElement('td');
  79.   var td7=document.createElement('td');
  80.   var td8=document.createElement('td');
  81.   var td9=document.createElement('td');
  82.    var td10=document.createElement('td');
  83. //agregamos los valores de tu primera tabla a los <td> creados..
  84.   td0.outerHTML= '<input type="button" value="Cancelar">';
  85.   td1.outerHTML=valor1;
  86.   td2.outerHTML=valor2;
  87.   td3.outerHTML=valor3;
  88.   td4.outerHTML=valor4;
  89.   td5.outerHTML=valor5;
  90.   td6.outerHTML=valor6;
  91.    td7.outerHTML=valor7;
  92.   td8.outerHTML=valor8;
  93.   td9.outerHTML=valor9;
  94.    td10.outerHTML=valor10;
  95. // agregamos los <td> al <tr>..
  96.   tr.appendChild(td0);
  97.   tr.appendChild(td1);
  98.   tr.appendChild(td2);
  99.   tr.appendChild(td3);
  100.  tr.appendChild(td4);
  101.   tr.appendChild(td5);
  102.   tr.appendChild(td6);
  103.   tr.appendChild(td7);
  104.   tr.appendChild(td8);
  105.   tr.appendChild(td9);
  106.    tr.appendChild(td10);
  107.   
  108. // agregamos el <tr> a tu segunda tabla
  109.   tabla2.appendChild(tr);
  110.  
  111. }
  112.  
  113. </script> 
  114.  
  115.          
  116. </head>
  117.  
  118. <body>
  119. <br/>
  120.  
  121.   <br/>
  122.   <div class="scrolled">
  123.     <table width="1019" border="1"  bordercolor="#999999" cellspacing="0">
  124.       <tr>
  125.         <td width="70" bgcolor="#E4E4E4" id="inicio">Acciones</td>
  126.         <td width="28" bgcolor="#E4E4E4">Tipo</td>
  127.         <td width="109" bgcolor="#E4E4E4">Nombre</td>
  128.         <td width="170" bgcolor="#E4E4E4">Inicio del Curso o Taller</td>
  129.         <td width="210" bgcolor="#E4E4E4">Culminacion del Curso del Taller</td>
  130.         <td width="109" bgcolor="#E4E4E4">Hora</td>
  131.         <td width="109" bgcolor="#E4E4E4">Total de Hora</td>
  132.         <td width="145" bgcolor="#E4E4E4">Modalidad</td>
  133.         <td width="130" bgcolor="#E4E4E4">Monto de inscripci&oacute;n</td>
  134.         <td width="123" bgcolor="#E4E4E4"><center>
  135.           Mensualidad
  136.         </center></td>
  137.         <td width="123" bgcolor="#E4E4E4" id="final"><center>
  138.           Monto Total
  139.         </center></td>
  140.       </tr>
  141.       <?php
  142.         while ($fila=mysql_fetch_array($rst_cliente)){
  143.         ?>
  144.       <tr onmouseover='this.style.background="#D7F7FF"' onmouseout='this.style.background=""'>
  145.         <td width="70" align="center"><input type="button" value="A&ntilde;adir" onClick="añadirFilas('<?php echo $fila[1];?>','<?php echo $fila[2];?>','<?php echo $f_inicio;?>','<?php echo $f_fin;?>','<?php echo $fila[14];?>','<?php echo $fila[15];?>','<?php echo $fila[3];?>','<?php echo $fila[6];?>','<?php echo $fila[7];?>','<?php echo $fila[8];?>')" /></td>
  146.         <td width="28" height="24" ><?php echo $fila[1];?></td>
  147.         <td width="109" height="24" ><?php echo $fila[2];?></td>
  148.         <td width="170" height="24" ><?php
  149.  
  150. $fecha=$fila[9];
  151. $fecha_m = explode("-", $fecha);
  152. $dia_m =$fecha_m[2];
  153. $mes_m =$fecha_m[1];
  154. $anio_m=$fecha_m[0];
  155. $f_inicio= $dia_m.'-'.$mes_m.'-'.$anio_m;   
  156.  echo $f_inicio;
  157.  ?></td>
  158.         <td width="210" height="24" ><?php 
  159.  
  160. $fecha=$fila[10];
  161. $fecha_m = explode("-", $fecha);
  162. $dia_m =$fecha_m[2];
  163. $mes_m =$fecha_m[1];
  164. $anio_m=$fecha_m[0];
  165. $f_fin= $dia_m.'-'.$mes_m.'-'.$anio_m;   
  166.  echo $f_fin;
  167. ?></td>
  168.         <td width="109" height="24" ><?php echo $fila[14];?></td>
  169.         <td width="109" height="24" ><?php echo $fila[15];?></td>
  170.         <td width="145"><?php echo $fila[3];?></td>
  171.         <td width="130"><?php echo $fila[6];?></td>
  172.         <td width="123"><div class="scrolled2"><?php echo $fila[7];?></div></td>
  173.         <td width="130"><?php echo $fila[8];?></td>
  174.       </tr>
  175.       <?php
  176.         }
  177.        ?>
  178.     </table>
  179.   </div>
  180.   
  181.   <br/>
  182.   <br/>
  183.   <br/>
  184.   <div class="scrolled">
  185.     <table width="1019" border="1"  bordercolor="#999999" cellspacing="0" id="tabla2">
  186.       <tr>
  187.         <td width="70" bgcolor="#E4E4E4" id="inicio2">Acciones</td>
  188.         <td width="28" bgcolor="#E4E4E4">Tipo</td>
  189.         <td width="109" bgcolor="#E4E4E4">Nombre</td>
  190.         <td width="170" bgcolor="#E4E4E4">Inicio del Curso o Taller</td>
  191.         <td width="210" bgcolor="#E4E4E4">Culminacion del Curso del Taller</td>
  192.         <td width="109" bgcolor="#E4E4E4">Hora</td>
  193.         <td width="109" bgcolor="#E4E4E4">Total de Hora</td>
  194.         <td width="145" bgcolor="#E4E4E4">Modalidad</td>
  195.         <td width="130" bgcolor="#E4E4E4">Monto de inscripci&oacute;n</td>
  196.         <td width="123" bgcolor="#E4E4E4"><center>
  197.           Mensualidad
  198.         </center></td>
  199.         <td width="130" bgcolor="#E4E4E4" id="final2"><center>
  200.           Monto Total
  201.         </center></td>
  202.       </tr>
  203.      
  204.     </table>
  205.   </div>