5

Intento hacer que desde un modal con una tabla se pueda mandar una fila hacia otra tabla.

Aquí esta lo que llevo avanzado. https://jsfiddle.net/eddyzezb/

Sin embargo, aunque manda la fila a otra tabla no regresa a su tabla original al ser eliminada. Y me gustaría saber lo que me falta para realizarlo.

Gracias de antemano.

JS Jquery 2.1.0:

$('table>tbody>tr>td>.a').one('click',function(){

    $(".othertable").append("<tr><td>"+
    $(this).closest('tr').children()[0].textContent+"</td><td><input type='text' placeholder='Ingresar cantidad'/></td><td>"+
    $(this).closest('tr').children()[1].textContent+"</td><td><input type='button' class='btneli' value='Eliminar'></td></tr>");
    $(this).parent().parent().remove();
    $('tr .btneli').one('click',function(){
        $('.btneli').parent().remove();
    });
});

HTML:

<div class="row">
    <div class="col-xs-12 col-md-12">
        <table class="table table-condensed table-hover table-bordered">
            <thead>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Accion</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td><button class="a">Aqui</button></td>

            </tr>
            <tr>
                <td>Sam</td>
                <td>Smith</td>
                <td><button class="a">Aqui</button></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<table class="othertable table-condensed table-hover table-bordered">
            <thead>
            <tr>
                <th>Firstname</th>
                <th>Precio</th>
                <th>Lastname</th>
                <th>Accion</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
1
  • Raphael, verifica si este código te sirve, saludos. el 22 jun. 2016 a las 21:54

1 respuesta 1

3

Respondiendo a tu pregunta le he hecho algunos cambios a tu código, básicamente quedaría de esta forma:

  1. Primero vamos a cambiar un poco la forma como estas pensando tu código, en lugar de eliminar la fila del botón Aquí vamos solamente a ocultarlo. es decir comentamos la línea; $(this).parent().parent().remove(); y agregamos var tr = $(this).closest("tr");. Al final deberá quedarte algo como esto:

    //  $(this).parent().parent().remove();
        var tr = $(this).closest("tr");
    

    y entonces agregamos el código que dejo abajo en el botón con la clase; .btneli

    $('tr .btneli').one('click',function(){
      $('.btneli').parent().remove();
      var tr = $(this).closest("tr"); //con la función closest llegamos hasta el tr
      var td = $(tr[0]).children(0); //Solicitamos el primer TR y obtenemos su primer hijo TD
      var texto = $(td[0]).text(); //Extramos el texto del TD
      $(".table tr td:contains("+texto+")").closest("tr").show(); //Buscamos el TD que contenga el texto, subimos hasta el TR y mostramos toda la fila.
    });
    

De igual forma te dejo el Snippet.

$('.a').one('click',function(){

    $(".othertable").append("<tr><td>"+
    $(this).closest('tr').children()[0].textContent+"</td><td><input type='text' placeholder='Ingresar cantidad'/></td><td>"+
    $(this).closest('tr').children()[1].textContent+"</td><td><input type='button' class='btneli' value='Eliminar'></td></tr>");
  //  $(this).parent().parent().remove();
  var tr = $(this).closest("tr");
  $(tr[0]).hide();
    $('tr .btneli').one('click',function(){
    	$('.btneli').parent().remove();
      var tr = $(this).closest("tr");
      var td = $(tr[0]).children(0);
      var texto = $(td[0]).text();
      $(".table tr td:contains("+texto+")").closest("tr").show();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div class="row">
    <div class="col-xs-12 col-md-12">
        <table class="table table-condensed table-hover table-bordered">
            <thead>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Accion</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td><button class="a">Aqui</button></td>

            </tr>
            <tr>
                <td>Sam</td>
                <td>Smith</td>
                <td><button class="a">Aqui</button></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<table class="othertable table-condensed table-hover table-bordered">
            <thead>
            <tr>
                <th>Firstname</th>
                <th>Precio</th>
                <th>Lastname</th>
                <th>Accion</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">EDIT</h4>
      </div>
      <div class="modal-body">
        <p><input type="text" class="input-sm" id="txtfname"/></p>
        <p><input type="text" class="input-sm" id="txtlname"/></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


Actualización por seguimiento de comentario.

Bien, te voy a dejar un código que hice partiendo de la necesidad particular. Cabe resaltar que hubo muchas cosas que no las trabaje con Jquery, las hice en JS Nativo, esto por la facilidad que tiene el JS nativo.

$('.a').on('click',function(){
var trPrincipal = this.offsetParent.parentElement; //Buscamos el TR principal
var firstName = trPrincipal.children[0].outerText; //Capturamos el FirstName
var lastName = trPrincipal.children[1].outerText; //Capturamos el LastName
$(".othertable").append("<tr><td>"+
firstName+"</td><td><input type='text' placeholder='Ingresar cantidad'/></td><td>"+
lastName+"</td><td><input type='button' class='btneli' value='Eliminar'></td></tr>");
  trPrincipal.style.display = "none"; //Ocultamos el TR de la Primer Tabla
  var btn_ = document.querySelectorAll(".btneli"); // Buscamos todos los elementos que tengan la clase .btneli
  for(var a in btn_){ //Iteramos la variable btn_
var b = btn_[a];
if(typeof b == "object"){ //Solo necesitamos los objetos
  b.onclick = function (){ //Asignamos evento click
    var trBtn = this.offsetParent.parentElement; // buscamos el tr principal de la segunda tabla
    var firstNameBtn = trBtn.children[0].outerText; //Capturamos el FirstName de la segunda tabla
    trBtn.remove(); // eliminamos toda la fila de la segunda tabla
    var tbl = document.querySelectorAll(".table td:first-child"); //Obtenemos todos los primeros elementos td de la primera tabla
    for(var x in tbl){ //Iteramos los elementos obtenidos
      var y = tbl[x];
      if(typeof y == "object"){ //solo nos interesan los object
        if (y.outerText == firstNameBtn){ //comparamos el texto de la variable y vs el firstNameBtn
           var t = y.parentElement; //capturamos el elemento de la coincidencia
          t.style.display = ""; //actualizamos el estilo display dejándolo en vacío y esto mostrará nuevamente la fila tr de la primera tabla
        }
      }
    }
  }
}
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div class="row">
    <div class="col-xs-12 col-md-12">
        <table class="table table-condensed table-hover table-bordered">
            <thead>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Accion</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td><button class="a">Aqui</button></td>

            </tr>
            <tr>
                <td>Sam</td>
                <td>Smith</td>
                <td><button class="a">Aqui</button></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<table class="othertable table-condensed table-hover table-bordered">
            <thead>
            <tr>
                <th>Firstname</th>
                <th>Precio</th>
                <th>Lastname</th>
                <th>Accion</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">EDIT</h4>
      </div>
      <div class="modal-body">
        <p><input type="text" class="input-sm" id="txtfname"/></p>
        <p><input type="text" class="input-sm" id="txtlname"/></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

4
  • En el snippet, la fila regresa, pero se queda parte de la fila.
    – Raphael
    el 22 jun. 2016 a las 22:30
  • jaja supuse que así lo querías, porque así fue como lo programaste, sorry, tambión quieres que la fila del botón eliminar se borre? el 22 jun. 2016 a las 22:34
  • claro, estoy intentando que se borre toda la fila, y regrese a la tabla anterior. Yo intentaba borrar la fila, pero al final, solo borraba la columna de los botones. Seria genial si me ayudas con ello.
    – Raphael
    el 23 jun. 2016 a las 2:59
  • 1
    Listo se actualizo la respuesta, espero pueda ser de utilidad. el 23 jun. 2016 a las 15:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.