Tema: mover filas entre dos tablas (agregar y eliminar)
Ver Mensaje Individual
  #10 (permalink)  
Antiguo 04/04/2013, 19:07
Avatar de oscard41
oscard41
 
Fecha de Ingreso: mayo-2012
Ubicación: Caracas
Mensajes: 288
Antigüedad: 12 años, 5 meses
Puntos: 8
Respuesta: mover filas entre dos tablas (agregar y eliminar)
Código HTML: 
Ver original
  1. <html>
  2. <head>
  3. <script type='text/javascript'>
  4. //Funcion manejadora de eventos
  5.    function agregarEventos(objeto,evento,funcion,captura){
  6.     
  7.       if(window.attachEvent)
  8.          objeto.attachEvent('on'+evento,funcion);
  9.       else if(window.addEventListener)
  10.          objeto.addEventListener(evento,funcion,captura);
  11.    }
  12.    //carga el evento registrarEventos cuando el navegador termina de cargar la pagina...
  13.    agregarEventos(window,'load',registrarEventos,false);
  14.    
  15.   //Registramos los eventos de los input que van a eliminar las filas de la tabla  
  16.    function registrarEventos(){ 
  17.       var tr1=document.getElementById('tr1');
  18.       var tr2=document.getElementById('tr2');
  19.  
  20.      agregarEventos(tr1,'click',eliminarFila,false);
  21.      agregarEventos(tr2,'click',eliminarFila,false);
  22.     
  23.    }
  24.    // verificamos si el evento es target o srcElement para que funcione en todos los navegadores 
  25.    // con parentNode obtnermos el padre del objeto que esta generando el evento que en este caso es el input button
  26.    //y a su ves seguimos buscando su padre para poder llegar al nivel de la fila 
  27.    //finalmente con removeChild() eliminamos el elemento hijo del padre..
  28.    function eliminarFila(event){
  29.    var evento=null;
  30.       (event.target)?evento=event.target : evento=event.srcElement;
  31.       var padre=evento.parentNode;
  32.       
  33.       padre1=padre.parentNode;
  34.       padre2=padre1.parentNode;
  35.       padre2.removeChild(padre1);
  36.    }
  37. </script>
  38. </head>
  39. <body>
  40.  
  41. <table cellspacing='1' cellpadding='4' border=1>
  42.   <thead>
  43.      <tr>
  44.         <th></th>
  45.         <th>Titulo1</th>
  46.         <th>Titulo2</th>
  47.         <th>Titulo3</th>
  48.         <th>Titulo4</th>
  49.      </tr>
  50.   </thead>
  51.   <tbody>
  52.    <tr id='fila1'>
  53.       <th><input type='button' value='X' id='tr1'/></th>
  54.       <th>informacion</th>
  55.       <th>informacion</th>
  56.       <th>informacion</th>
  57.       <th>informacion</th>
  58.    </tr>
  59.    <tr id='fila2'>
  60.       <th><input type='button' value='X' id='tr2'/></th>
  61.       <td>informacion2</td>
  62.       <td>informacion2</td>
  63.       <td>informacion2</td>
  64.       <td>informacion2</td>
  65.    </tr>
  66.   </tbody>
  67. </table>
  68. </body>
  69. </html>

Hay esta un ejemplo que hice copialo pegalo pruebalo analizalo y adaptalo a tu codigo...