Tema: mover filas entre dos tablas (agregar y eliminar)
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 31/03/2013, 15:12
jjeshuacm1
 
Fecha de Ingreso: septiembre-2012
Mensajes: 73
Antigüedad: 12 años, 3 meses
Puntos: 0
Respuesta: agregar y eliminar filas entre dos tablas
muchas gracias me funciono correctamente, pero como haría si quiero hacer lo contrario? es decir eliminar fila por fila de los campos que se crearon ,, este es el codigo que genere a partir del que me diste,


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>