换出 Table 行

Question

我有两个 table。从顶部 table 您 select 数据项，方法是单击添加按钮，该按钮会将该行添加到底部 table。相反，如果您 select 从底部 table 删除按钮，该行将回到顶部 table。现在我什至不确定 jQuery 是否可以在不使用唯一 class 名称的情况下完成此任务...因此我在这里寻求帮助。

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

如果您不想让它们保持有序，那么基本上您可以只删除行，而不是单元格，然后将其附加到另一个 table 的最后一行。您需要向第二个 table 添加另一个 "tbody" 标记，这样如果 table 中没有行，我们就不会将这些行放在 "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');
});

对于删除功能，除了 table class 选择器之外，它是相同的代码，并且也为按钮切换 classes .

Answer 2

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

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

Answer 3

这是一个双向工作的完整解决方案，包括更改图标的 classes。

我给每个table加了一个普通的class。

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 事件必须委托给table元素，因为删除元素也会删除事件侦听器

参考文献：

closest() Docs

toggleClass() Docs

DEMO

换出 Table 行

Swap out Table Rows

javascript

jquery

html

twitter-bootstrap-3