javascript - 交换表行

我有两张桌子。在顶部表格中，您可以通过单击添加按钮将其添加到底部表格中来选择数据项。相反，如果您从底部表格中选择删除按钮，则该行将返回顶部表格。现在，我什至不确定使用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");
    });
});

最佳答案

这是一个双向均可使用的完整解决方案，其中包括更改图标的类。

我向每个表添加了一个通用类。

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

关于javascript - 交换表行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27808094/