时间戳

首页 > 解决方案 > 使用按钮更改表格行顺序并非每次都有效

javascript - 使用按钮更改表格行顺序并非每次都有效

问题描述

我有一个表，<tr>每个项目有 2 个，.project-row& .expandable-row。我正在尝试使用中的向上/向下按钮更改这些项目的顺序.project-row，我开始工作了，但不是 100% 的时间：

JSFiddle

例如：当我单击项目 1 时，它会按预期向下移动，但是当我再次尝试将其向下移动时，我必须单击它两次才能真正移动。

为什么？

标签： javascriptjqueryhtmlhtml-table

解决方案

问题是因为您对错误行的链式使用next()和prev()定位 - 它进入目标组的中间而不是之前/之后。

您可以通过组合移动内容并根据某些数据属性更改其行为的事件处理程序来解决此问题并使逻辑更简单。尝试这个：

jQuery(function($) {
  $(document).on('click', '.order-change', function() {
    $('.expandable-row').hide();
    
    var $trigger = $(this)
    var $row = $trigger.closest('tr');
    var $infoRow = $row.next('tr');

    if ($trigger.data('dir') === 'up') {
      $row.add($infoRow).insertBefore($row.prev());
    } else {
      $row.add($infoRow).insertAfter($infoRow.next());
    }
  });
});
td {
  border: 1px solid black;
  text-align: center;
}

td div {
  cursor: pointer;
}

.expandable-row {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="project-row" data-project-id="0">
      <td>
        <div class="order-change" data-dir="up">up</div>
        <div class="order-change" data-dir="down">down</div>
      </td>
      <td>Project 1</td>
    </tr>
    <tr class="expandable-row" data-project-id="0">
      <td>Project 1 info</td>
    </tr>
    <tr class="project-row" data-project-id="1">
      <td>
        <div class="order-change" data-dir="up">up</div>
        <div class="order-change" data-dir="down">down</div>
      </td>
      <td>Project 2</td>
    </tr>
    <tr class="expandable-row" data-project-id="1">
      <td>Project 2 info</td>
    </tr>
    <tr class="project-row" data-project-id="2">
      <td>
        <div class="order-change" data-dir="up">up</div>
        <div class="order-change" data-dir="down">down</div>
      </td>
      <td>Project 3</td>
    </tr>
    <tr class="expandable-row" data-project-id="2">
      <td>Project 3 info</td>
    </tr>
  </tbody>
</table>

推荐阅读