Foros del Web » Programando para Internet » Javascript »

Mover filas de una tabla a otra con javaScript

Estas en el tema de Mover filas de una tabla a otra con javaScript en el foro de Javascript en Foros del Web. Hola a todos pues estoy trabajando con struts mi problema es que tengo dos tablas una que se llena con registros de la base de ...
  #1 (permalink)  
Antiguo 07/01/2011, 11:03
 
Fecha de Ingreso: diciembre-2010
Mensajes: 10
Antigüedad: 14 años
Puntos: 1
Pregunta Mover filas de una tabla a otra con javaScript

Hola a todos pues estoy trabajando con struts mi problema es que tengo dos tablas una que se llena con registros de la base de datos(tabla1) y otra que esta vacia (tabla2) lo que quiero hacer es q al dar clic en cualquier celda de la tabla1 se seleccione toda la fila y que permanesca asi aunque seleccione otras filas pero que cuando le de clic a una fila seleccionada se desseleccione esto es con el fin de que cuando le de clic a un boton me pase las filas seleccionadas a la tabla vacia(tabla2) si alguien me puede dar un ejemplo de como se aria esto o en caso de que no se pueda hacer con tablas me podrian dar una idea de como lo podria hacer, basicamente asi deberia verse el ejemplo sencillo en HTML para no complicarnos tanto
Saludos

<html>
<head>
</head>

<body>
<table id="contenedor">
<tr>
<td>
<table id="tabla1">
<tr>
<td>
campo1
</td>
<td>
campo2
</td>
<td>
campo3
</td>
</tr>
<tr>
<td>
campo1
</td>
<td>
campo2
</td>
<td>
campo3
</td>
</tr>
<tr>
<td>
campo1
</td>
<td>
campo2
</td>
<td>
campo3
</td>
</tr>
</table>
</td>
<td>
<input type="button" id="agregar">agregar fila</input>
<input type="button" id="regresar">regresar fila</input>
</td>
<td>
<table id="tabla2">
<tr>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

de antemano gracias
  #2 (permalink)  
Antiguo 07/01/2011, 12:58
Avatar de Danielfuzz  
Fecha de Ingreso: septiembre-2007
Mensajes: 111
Antigüedad: 17 años, 2 meses
Puntos: 18
Respuesta: Mover filas de una tabla a otra con javaScript

Hola lodoman, primeramente te recomendaria usar algun framework javascript para estas tareas ya que se simplifica bastante el código. Bueno acá te dejo el código final que funciona, excepto por un detalle, a ver si lo encuentras, yo no tengo tiempo ahora de solucionarlo, pero supongo que vos puedes hallarle alguna solución.

Código HTML:
<html>
<head>
<script type="text/javascript">
	addEvent(window,'load',iniciarEventos,false);
	function addEvent(elemento,nomevento,funcion,captura)
	{
	  if (elemento.attachEvent)
	  {
		elemento.attachEvent('on'+nomevento,funcion);
		return true;
	  }
	  else  
		if (elemento.addEventListener)
		{
		  elemento.addEventListener(nomevento,funcion,captura);
		  return true;
		}
		else
		  return false;
	}
	function iniciarEventos(){
		var td=document.getElementById('tabla1').getElementsByTagName("tr");
		for(var i=0; i<td.length; i++)
		{
			addEvent(td[i], 'click', seleccion, false);
		}
	}
	function seleccion(){
		if(this.className=='selected')
			this.className='';
		else
			this.className='selected';
	}
	function agregar(){
		var tr=document.getElementById("tabla1").getElementsByTagName("tr");
		var tbl2=document.getElementById("tabla2");//.getElementsByTagName("tbody")[0];
		for(var i=0; i<tr.length; i++){
			if(tr[i].className=="selected")
			{
				tr[i].className="";
				tbl2.appendChild(tr[i]);
			}
		}
	}
	function regresar(){
		var tr=document.getElementById("tabla2").getElementsByTagName("tr");
		var tbl2=document.getElementById("tabla1");//.getElementsByTagName("tbody")[0];
		for(var i=0; i<tr.length; i++){
			if(tr[i].className=="selected")
			{
				tr[i].className="";
				tbl2.appendChild(tr[i]);
			}
		}
	}
</script>
<style>
#tabla1 tr:hover{
	background:#9C0
}
#tabla1 tr.selected, #tabla1 tr.selected:hover{
	background:#F00
}
#tabla2 tr:hover{
	background:#9C0
}
#tabla2 tr.selected, #tabla2 tr.selected:hover{
	background:#F00
}
</style>
<title>Documento sin título</title>
</head>
<body>
<table id="contenedor">
	<tr>
		<td>
			<table id="tabla1">
                <tr>
                    <td>
                        campo1
                    </td>
                    <td>
                        campo2
                    </td>
                    <td>
                        campo3
                    </td>
                </tr>
                <tr>
                    <td>
                        campo1
                    </td>
                    <td>
                        campo2
                    </td>
                    <td>
                        campo3
                    </td>
                </tr>
                <tr>
                    <td>
                        campo1
                    </td>
                    <td>
                        campo2
                    </td>
                    <td>
                        campo3
                    </td>
                </tr>
                <tr>
                    <td>
                        campo1
                    </td>
                    <td>
                        campo2
                    </td>
                    <td>
                        campo3
                    </td>
                </tr>
            </table>
		</td>
		<td>
			<input type="button" id="agregar" onclick="agregar()">agregar fila</input>
			<input type="button" id="regresar" onclick="regresar()">regresar fila</input>
		</td>
		<td>
            <table id="tabla2">
               
            </table>
        </td>
	</tr>
</table>
</body>
</html> 
Saludos!
  #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.   <head>
  3.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  4.     <style>
  5.     <!--
  6.       .fila{
  7.      
  8.       }
  9.      
  10.       .seleccionado{
  11.          background: rgb(255,255,153);
  12.       }
  13.      
  14.      
  15.    //-->
  16.     </style>
  17.     <script src="jquery.js"></script>
  18.     <script>
  19.       $(function(){          
  20.           $("table.tablaBBDD tr").each(function(){
  21.             $(this).click(function(){
  22.               if($(this).attr("class") == 'fila'){
  23.                 $(this).removeClass('fila');
  24.                 $(this).addClass('seleccionado');  
  25.               }else{
  26.                 $(this).removeClass('seleccionado');
  27.                 $(this).addClass('fila');
  28.               }  
  29.             })
  30.           });
  31.          $("#pasar").click(function(){
  32.             $("table.tablaBBDD tr").each(function(){
  33.                if($(this).attr("class") == 'seleccionado'){
  34.                   $("#guardarRegistros").append($(this));
  35.                }
  36.             })
  37.          })
  38.                        
  39.       })
  40.     </script>
  41.        
  42.   </head>
  43.  
  44.   <body>
  45.     <!-- TABLA QUE PROVIENE DE LA BASE  DE DATOS -->
  46.     <table width="500" class="tablaBBDD">
  47.      <tr class="fila">
  48.       <td> Registro 1</td>
  49.       <td> Registro 1</td>
  50.       <td> Registro 1</td>
  51.       <td> Registro 1</td>
  52.       <td> Registro 1</td>
  53.      </tr>
  54.      
  55.      <tr class="fila">
  56.       <td> Registro 2</td>
  57.       <td> Registro 2</td>
  58.       <td> Registro 2</td>
  59.       <td> Registro 2</td>
  60.       <td> Registro 2</td>
  61.      </tr>
  62.      
  63.      <tr class="fila">
  64.       <td> Registro 3</td>
  65.       <td> Registro 3</td>
  66.       <td> Registro 3</td>
  67.       <td> Registro 3</td>
  68.       <td> Registro 3</td>
  69.      </tr>
  70.      
  71.      <tr class="fila">
  72.       <td> Registro 4</td>
  73.       <td> Registro 4</td>
  74.       <td> Registro 4</td>
  75.       <td> Registro 4</td>
  76.       <td> Registro 4</td>
  77.      </tr>
  78.     </table>
  79.     <!-- TABLA A LLENAR -->
  80.    
  81.     <input type="button" id="pasar" value="Pasar Datos">
  82.    
  83.     <table id="guardarRegistros">
  84.      
  85.     </table>
  86.      
  87.   </body>
  88.  
  89. </html>

Salu2
  #4 (permalink)  
Antiguo 07/01/2011, 15:48
 
Fecha de Ingreso: diciembre-2010
Mensajes: 10
Antigüedad: 14 años
Puntos: 1
Respuesta: Mover filas de una tabla a otra con javaScript

<script src="jquery.js"></script>

gracias por las respuestas tan rapidas en verdad me ha servido mucho solo una pregunta 4ng3r supongo que en la linea que acabo de poner arriba llamas al jquery.js que esta en la misma carpeta que tu html??
  #5 (permalink)  
Antiguo 07/01/2011, 15:55
 
Fecha de Ingreso: diciembre-2010
Mensajes: 10
Antigüedad: 14 años
Puntos: 1
Respuesta: Mover filas de una tabla a otra con javaScript

Danielfuzz

Exeeeeeelente amigo que buen ejemplo sencillo pero certero mil gracias
saludos
  #6 (permalink)  
Antiguo 07/01/2011, 16:08
4ng3r
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Mover filas de una tabla a otra con javaScript

Cita:
Iniciado por lodoman Ver Mensaje
<script src="jquery.js"></script>

gracias por las respuestas tan rapidas en verdad me ha servido mucho solo una pregunta 4ng3r supongo que en la linea que acabo de poner arriba llamas al jquery.js que esta en la misma carpeta que tu html??
si claro es la misma carpeta
  #7 (permalink)  
Antiguo 07/01/2011, 17:16
Avatar de Danielfuzz  
Fecha de Ingreso: septiembre-2007
Mensajes: 111
Antigüedad: 17 años, 2 meses
Puntos: 18
Respuesta: Mover filas de una tabla a otra con javaScript

Cita:
Iniciado por lodoman Ver Mensaje
Danielfuzz

Exeeeeeelente amigo que buen ejemplo sencillo pero certero mil gracias
saludos
De nada, para compartir mis conocimientos. No olvides clickear mi Karma
  #8 (permalink)  
Antiguo 07/01/2011, 18:37
 
Fecha de Ingreso: diciembre-2010
Mensajes: 10
Antigüedad: 14 años
Puntos: 1
Respuesta: Mover filas de una tabla a otra con javaScript

hola Danielfuzz tu ejemplo lo adapte a mi jsp pero solo funciona para mozila firefox en internet explorer 8 no funciona creo que es al momento de cargar el script me podrias explicar por que pasa esto para encontrar una solucion
saludos
  #9 (permalink)  
Antiguo 10/01/2011, 10:34
Avatar de Danielfuzz  
Fecha de Ingreso: septiembre-2007
Mensajes: 111
Antigüedad: 17 años, 2 meses
Puntos: 18
Respuesta: Mover filas de una tabla a otra con javaScript

jsp?, la verdad no he programado en ese lenguaje, lo que te pasé esta en .js (javascript), tengo entendido que jsp es un lenguaje de servidor como asp o php, lo que significa que se procesa en el server y te devuelve la respuesta al explorador cosa que si existe alguna falla ésta debería manifestarse en todos los exploradores y no sólo en uno específico.

cuando publiqué la respuesta comenté:

Cita:
funciona, excepto por un detalle, a ver si lo encuentras, yo no tengo tiempo ahora de solucionarlo, pero supongo que vos puedes hallarle alguna solución.
con este error me refería a que si marcas todas las filas se movian todas excepto una o 2.

Pero en sí, que es lo que no funciona en el script?

Saludos
  #10 (permalink)  
Antiguo 18/01/2011, 16:05
 
Fecha de Ingreso: diciembre-2010
Mensajes: 10
Antigüedad: 14 años
Puntos: 1
Respuesta: Mover filas de una tabla a otra con javaScript

gracias lo de las filas ya lo habia solucionado eso ya lo habia solucionado y lo que comentaba ya lo solucione gracias, lo que pasaba era que en firefox hacia todo ala perfeccion pero en internet explorer me mostraba las tablas pero no hacia nada (no pintaba las filas, cuando hacia clic no las seleccionaba) lo que hice fue que cambie la forma de referenciar las clases de los estilos y el .appendchild lo cambie solo por .append y algunas otras cosas y funciona perfecto
  #11 (permalink)  
Antiguo 19/01/2011, 17:20
Avatar de air94_nathurzer  
Fecha de Ingreso: diciembre-2010
Mensajes: 7
Antigüedad: 14 años
Puntos: 0
Respuesta: Mover filas de una tabla a otra con javaScript

por favor si alguien puede responder mi tema es duda en validacion de datos?
no se donde poner el codigo de validacion porfa??
agradeceria mucho su respuesta

Etiquetas: dinamicas, filas, mover, tablas
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.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 21:56.