javascript - 交换表行

Question

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

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

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

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 事件必须委托(delegate)给表格元素，因为删除元素也会删除事件监听器

引用资料:

closest() Docs

toggleClass() Docs

DEMO