来自 table 的上下行

Question

我有一个 table 可以 select/deselect 多行。我想在 table 中向上或向下移动这些行。但是，当我移动行时，它们消失了，我不知道为什么。我认为问题出在这一行精确的代码上：

$(this).appendTo($(this).prev());

$(document).ready(function() {
  $("#table1 tbody tr").click(function() {
    $(this).toggleClass('selected');
  });
});

$(document).ready(function() {
  $("#table2 tbody tr").click(function() {
    $(this).toggleClass('selected');
  });
});

$(document).ready(function() {
  $(".down").click(function() {
    $('#table1 tr').each(function() {
      if ($(this).attr('class') == 'selected') {
        $(this).appendTo($(this).next());
      }
    });
  });
});

$(document).ready(function() {
  $(".up").click(function() {
    $('#table1 tr').each(function() {
      if ($(this).attr('class') == 'selected') {
        $(this).appendTo($(this).prev());
      }
    });
  });
});

.selected td {
  background: #ffffcf;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="up">UP</button>
<button type="button" class="down">DOWN</button>
<h2>Table1</h2>
<table id="table1">
  <tr>
    <td>Row1</td>
  </tr>
  <tr>
    <td>Row2</td>
  </tr>
  <tr>
    <td>Row3</td>
  </tr>
  <tr>
    <td>Row4</td>
  </tr>
  <tr>
    <td>Row5</td>
  </tr>
  <tr>
    <td>Row6</td>
  </tr>
</table>
<h2>Table2</h2>
<table id="table2">
  <tr>
    <td>Row21</td>
  </tr>
  <tr>
    <td>Row22</td>
  </tr>
  <tr>
    <td>Row23</td>
  </tr>
  <tr>
    <td>Row24</td>
  </tr>
  <tr>
    <td>Row25</td>
  </tr>
  <tr>
    <td>Row26</td>
  </tr>
</table>

jsFiddle : https://jsfiddle.net/5jxvaw3d/

Answer 1

只需将 appendTo() 更改为 insertBefore() 和 insertAfter()

$(document).ready(function() {
  $("#table1 tbody tr").click(function() {
    $(this).toggleClass('selected');
  });
});

$(document).ready(function() {
  $("#table2 tbody tr").click(function() {
    $(this).toggleClass('selected');
  });
});

$(document).ready(function() {
  $(".down").click(function() {
    $('#table1 tr').each(function() {
      if ($(this).attr('class') == 'selected') {
        $(this).insertAfter($(this).nextAll(':not(.selected)').eq(0));
      }
    });
  });
});

$(document).ready(function() {
  $(".up").click(function() {
    $('#table1 tr').each(function() {
      if ($(this).attr('class') == 'selected') {
        $(this).insertBefore($(this).prevAll(':not(.selected)').eq(0));
      }
    });
  });
});

.selected {
  background-color: #F00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="up">UP</button>
<button type="button" class="down">DOWN</button>
<h2>Table1</h2>
<table id="table1">
  <tr>
    <td>Row1</td>
  </tr>
  <tr>
    <td>Row2</td>
  </tr>
  <tr>
    <td>Row3</td>
  </tr>
  <tr>
    <td>Row4</td>
  </tr>
  <tr>
    <td>Row5</td>
  </tr>
  <tr>
    <td>Row6</td>
  </tr>
</table>
<h2>Table2</h2>
<table id="table2">
  <tr>
    <td>Row21</td>
  </tr>
  <tr>
    <td>Row22</td>
  </tr>
  <tr>
    <td>Row23</td>
  </tr>
  <tr>
    <td>Row24</td>
  </tr>
  <tr>
    <td>Row25</td>
  </tr>
  <tr>
    <td>Row26</td>
  </tr>
</table>

编辑

快速修复所选两个相邻的问题

将此 $(this).insertBofer($(this).prev()); 更改为 $(this).insertBefore($(this).prevAll(':not(.selected)').eq(0));

（更新片段）

来自 table 的上下行

Up and Down rows from table

jquery

html-table

move