Tema: Mover filas de una tabla a otra con javaScript
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 07/01/2011, 13:20
4ng3r
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: Mover filas de una tabla a otra con javaScript
Se me ocurre algo con JQuery, solo faltaria completar las clases CSS para que quede mas bonito y todo eso ... ya lo probé y me funk

Código HTML: 
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.   <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5.     <style>
  6.     <!--
  7.        .fila{
  8.        
  9.        }
  10.        
  11.        .seleccionado{
  12.           background: rgb(255,255,153);
  13.        }
  14.        
  15.        
  16.     //-->
  17.     </style>
  18.     <script src="jquery.js"></script>
  19.     <script>
  20.       $(function(){          
  21.           $("table.tablaBBDD tr").each(function(){
  22.             $(this).click(function(){
  23.               if($(this).attr("class") == 'fila'){
  24.                 $(this).removeClass('fila');
  25.                 $(this).addClass('seleccionado');   
  26.               }else{
  27.                 $(this).removeClass('seleccionado');
  28.                 $(this).addClass('fila');
  29.               }   
  30.             })
  31.           });
  32.          $("#pasar").click(function(){
  33.             $("table.tablaBBDD tr").each(function(){
  34.                if($(this).attr("class") == 'seleccionado'){
  35.                   $("#guardarRegistros").append($(this));
  36.                } 
  37.             })
  38.          }) 
  39.                        
  40.       })
  41.     </script>
  42.         
  43.   </head>
  44.  
  45.   <body>
  46.     <!-- TABLA QUE PROVIENE DE LA BASE  DE DATOS -->
  47.     <table width="500" class="tablaBBDD">
  48.      <tr class="fila">
  49.       <td> Registro 1</td>
  50.       <td> Registro 1</td>
  51.       <td> Registro 1</td>
  52.       <td> Registro 1</td>
  53.       <td> Registro 1</td>
  54.      </tr>
  55.      
  56.      <tr class="fila">
  57.       <td> Registro 2</td>
  58.       <td> Registro 2</td>
  59.       <td> Registro 2</td>
  60.       <td> Registro 2</td>
  61.       <td> Registro 2</td>
  62.      </tr>
  63.      
  64.      <tr class="fila">
  65.       <td> Registro 3</td>
  66.       <td> Registro 3</td>
  67.       <td> Registro 3</td>
  68.       <td> Registro 3</td>
  69.       <td> Registro 3</td>
  70.      </tr>
  71.      
  72.      <tr class="fila">
  73.       <td> Registro 4</td>
  74.       <td> Registro 4</td>
  75.       <td> Registro 4</td>
  76.       <td> Registro 4</td>
  77.       <td> Registro 4</td>
  78.      </tr>
  79.     </table>
  80.     <!-- TABLA A LLENAR -->
  81.     
  82.     <input type="button" id="pasar" value="Pasar Datos">
  83.     
  84.     <table id="guardarRegistros">
  85.      
  86.     </table>
  87.       
  88.   </body>
  89.  
  90. </html>

Salu2