交换表行

Question

我有两张桌子。在顶部表格中，您可以通过单击添加按钮来选择数据项，该按钮会将该行添加到底部表格中。反过来，如果您从底部表格中选择删除按钮，该行将返回到顶部表格。现在我甚至不确定jQuery是否可以在不使用唯一类名的情况下完成此任务...因此我在这里寻求帮助。

Here is a Fiddle只有一半的工作，因为我还没想出是否有可能做我要问的事。

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

这是一个完整的解决方案，可以在两个方向上工作，包括更改图标的类。

我为每个表添加了一个公共类。

HTML更改：

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

此单个事件处理程序适用于两组按钮

/* 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()
    });       

});

请注意，clcik事件必须委派到表元素，因为删除元素也会删除事件侦听器

参考文献：

<强> closest() Docs

<强> toggleClass() Docs

的 DEMO

Answer 2

如果您不想保持它们的顺序，那么基本上您可以删除行而不是单元格，并将其附加到另一个表的最后一行。您需要在第二个表中添加另一个“tbody”标记，这样如果表中没有行，我们就不会将行放在“thead”中。

$('.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');
});

对于remove函数，除了表类选择器之外，它是相同的代码，并且也为该按钮切换类。

Answer 3

这就是我所做的。 Updated fiddle here 首先，我将tbody添加到html表元素中，以便我们可以定位数据区域。 然后将click事件添加到表元素而不是按钮，以便我们可以使用事件委派。

$(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);
  });
});