Swap out Table Rows

Question

I have two tables. From the top table you select data items by clicking on a add button which would add that row to the bottom table. In reverse if you select the remove button from the bottom table the row would go back to the top table. Now I am not even sure if it is possible with jQuery to accomplish this without using unique class names...hence me looking for help here.

Here is a Fiddle that is only half working, since I haven't figured out yet if it is possible to do what I am asking.

HTML

<table class="aside-table">
      <thead>
        <tr>
          <th>Data Options
            <button type="button" class="btn add-all-selection pull-right" onclick="location.href='#'"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add All Data Options</button></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Item 3
            <button type="button" class="btn add-selection pull-right"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button></td>
        </tr>
        <tr>
          <td>Item 4
            <button type="button" class="btn add-selection pull-right"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button></td>
        </tr>
      </tbody>
    </table>
    <table class="data-selection-table">
      <thead>
        <tr>
          <th>Data Selection Summary
            <button type="button" class="btn remove-all-selection pull-right" onclick="location.href='#'"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span> Remove All Data Options</button></th>
        </tr>
      </thead>
      <tr>
        <td>Item 1
          <button type="button" class="btn pull-right remove-selection"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button></td>
      </tr>
      <tr>
        <td>Item 2
          <button type="button" class="btn pull-right remove-selection"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button></td>
      </tr>
    </table>

jQuery

    $(document).ready(function(e) {
    $('.add-selection').click(function(){
        $(this).closest('tr').find('td').fadeOut("fast");
    });
    $('.remove-selection').click(function(){
        $(this).closest('tr').find('td').fadeOut("fast");
    });
});

Answer 1

If you're not wanting to keep them in order, then basically you can just remove the row, not the cell, and append it to the last row on the other table. You'll need to add another "tbody" tag to the 2nd table so we don't put the rows in the "thead" if there's no rows in the table.

$('.add-selection').on('click', function(){
    var $row = $(this)
                .closest('tr')
                .fadeOut("fast");
    $row.detach()
        .appendTo($('.aside-table').find('tbody tr:last'))
        .find('button')
        .removeClass('add-selection')
        .addClass('remove-selection')
        .find('span')
        .removeClass('glyphicon-plus')
        .addClass('glyphicon-minus');
});

For the remove function, it'd be the same code w/ the exception of the table class selector, and switch out the classes for the button as well.

Answer 2

Here's a full solution that works in both directions and includes changing the classes for the icons.

I added a common class to each table.

HTML Change:

<table class="aside-table items-table">

This single event handler works for both sets of buttons

/* delegate a click handler for both button classes */
$('table.items-table').on('click', '.add-selection, .remove-selection', function(){
    /* "this" is the button element instance */
    var $btn = $(this).toggleClass('add-selection remove-selection'),
         /* define row to be moved by looking up DOM tree*/
        $item = $btn.closest('tr'),
        /* define other table */
        $otherTable = $('.items-table').not( $btn.closest('table'));        

    /* fade and move to other table */
    $item.fadeOut(function(){
        /* fade out has finished, can move now */
        $otherTable.append($item);
        /* switch button icon classes */
        $btn.find('span').toggleClass('glyphicon-plus glyphicon-minus')
        /* is in new table, can fade in */
        $item.fadeIn()
    });       

});

Note that the clcik event has to be delegated to the table elements since removing an element removes event listeners also

References:

closest() Docs

toggleClass() Docs

DEMO

Answer 3

This is what I did. Updated fiddle here First I added tbody to the html table element so we can target the data areas. Then added click events to the table elements instead of buttons so we can use event delegation.

$(document).ready(function() {
  $('.aside-table').on('click', '.add-selection',  function(){
    var $item = $(this).closest('tr');
    $item.fadeOut("fast");
    var $new = $item.clone();
    $new.find('.add-selection').removeClass('add-selection').addClass('remove-selection');
    $new.find('.glyphicon').removeClass('glyphicon-plus').addClass('glyphicon-minus');
    $('.data-selection-table').find('tbody').append($new);

  });
  $('.data-selection-table').on('click', '.remove-selection', function(){
    var $item = $(this).closest('tr');
    $item.fadeOut("fast");
    var $new = $item.clone();
    $new.find('.remove-selection').removeClass('remove-selection').addClass('add-selection');
    $new.find('.glyphicon').removeClass('glyphicon-minus').addClass('glyphicon-plus');
    $('.aside-table').find('tbody').append($new);
  });
});