[DUDA] Problema agregando y eliminando rows con jquery.....

[DrKillador]

Buenas amig@s,

Ando aqui liado con dos tablas de una pagina web, a ver si me podeis ayudar, porque me estoy volviendo loco con javascript.

Tengo una tabla html con el aspecto siguiente:

Código (html4strict) [Seleccionar] Expandir


<table>
<tr class="seleccionar" id="Juan">
<td>
Juan
</td>
<td>
23
</td>
</tr>
<tr class="seleccionar" id="Leo">
<td>
Leo
</td>
<td>
47
</td>
</tr>


Por otro lado tengo otra tabla idéntica (tambien con 2 columnas), pero sin filas todavia, en la que deberia ir agregando automaticamente la misma fila de la otra tabla cuando haga click sobre ella con el ratón, y borrarla de la primera.

De manera que si hago clic en todas las filas de la primera tabla, se borrarán de ésta, y aparecerán en la 2ª tabla.

En resumen, el objetivo es pasar todas las filas de la primera tabla a la segunda, haciendo clic sobre cada fila una a una.

Estoy probando con jquery, para eliminar la fila pero no me funciona y no se por qué:

Código (javascript) [Seleccionar] Expandir

<script type="text/javascript">
$(function(){
$(document).on("click",".seleccionar",function(){
$(this).remove();
});
});
</script>

Y para agregar la fila he pensado en usar el id, que tiene el nombre de las personas, para localizar los td. ¿Cómo podría hacerlo?

Gracias amigoss

[s00rk]

Bueno a como creo entender quieres pasar los datos de una columna a otra, lo que se me ocurre es hacer algo asi:

Código (javascript) [Seleccionar] Expandir


$("#Juan td").click(function() {
var valor = $(this).text();
$("#Leo").append(
'<td>' + valor + '</td>'
);
$(this).remove();
});


Aunque bueno eso a como entendi ya que pues es lo que muestras de la tabla.

[#!drvy]

@s00rk lo que haces es modificar las celdas no las filas xD

Yo lo que haria seria esperar un evento sobre el tr de la primera tabla, y usaria appendTo() para mover el tr de una tabla a otra.

Código (html4strict) [Seleccionar] Expandir

<table id="primera">
  <tr>
     <td>Juanjo</td>
     <td>48</td>
     <td>Paris</td>
  </tr>
  <tr>
     <td>Fatima</td>
     <td>50</td>
     <td>Barcelona</td>
  </tr>
</table>
<hr />
<table id="segunda"></table>

Código (javascript) [Seleccionar] Expandir

$(function () {
  $(document).on('click','#primera tr',function(){
     $(this).appendTo('#segunda');
  });
});

Saludos