Изменение порядка строк таблицы с помощью кнопок, которые не работают каждый раз - PullRequest
Новая
       3

Изменение порядка строк таблицы с помощью кнопок, которые не работают каждый раз

0 голосов
/ 18 февраля 2020

У меня есть таблица с 2 <tr> на проект, .project-row & .expandable-row. Я пытаюсь изменить порядок этих проектов, используя кнопки вверх / вниз в .project-row, которые я получил, но не в 100% случаев:

JSFiddle

Например: когда я щелкаю вниз по проекту 1, он движется вниз, как и ожидалось, но когда я пытаюсь снова сдвинуть его вниз, мне нужно дважды щелкнуть по нему, прежде чем он действительно сдвинется.

Почему?

1 Ответ

0 голосов
/ 18 февраля 2020

Проблема в том, что ваше цепное использование next() и prev() нацелено на неправильные строки - оно идет в середину целевой группы, а не до или после нее.

Вы можете это исправить и упростить логи c, комбинируя обработчики событий, которые перемещают содержимое и изменяют свое поведение на основе некоторых атрибутов данных. Попробуйте это: 

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>
...