向上/向下移动并更改顺序javascript

Question

所以我有一个带有行和两个按钮的表，附加到一列上。当我单击向上按钮时，行会向上，否则会向下。问题是我想实现这些列的顺序。例如，如果我的行向上，那么列的顺序应该是它更改的行的顺序。我该怎么做？我在javascript:中的函数

 $(document).ready(function () {
 $(".up, .down").click(function () {
     var $element = this;
     var row = $($element).parents("tr:first");
     if($(this).is('.up')){
         row.insertBefore(row.prev());
     }
     else{
          row.insertAfter(row.next());
     }
});
});


<tr>
            <td><?php echo $row['id']; ?></td>  
            <td><?php echo $row['title'];?></td>
            <td><?php echo $row['body'];?></td>
            <td><?php echo $row['ord'];?> <button class='up'>Up </button> <button class='down'>Down </button></td>
 </tr>

有什么建议吗？

Answer 1

这会有帮助吗？

PHP输出HTML:

<table>
  <tr>
    <td>1</td>
    <td>Title 1</td>
    <td>Body 1</td>
    <td>
      <button class='up'>Up </button>
      <button class='down'>Down </button>
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>Title 2</td>
    <td>Body 2</td>
    <td>
      <button class='up'>Up </button>
      <button class='down'>Down </button>
    </td>
  </tr>
  <tr>
    <td>3</td>
    <td>Title 3</td>
    <td>Body 3</td>
    <td>
      <button class='up'>Up </button>
      <button class='down'>Down </button>
    </td>
  </tr>
  <tr>
    <td>4</td>
    <td>Title 4</td>
    <td>Body 4</td>
    <td>
      <button class='up'>Up </button>
      <button class='down'>Down </button>
    </td>
  </tr>
</table>

JavaScript:

$(document).ready(function() {
  $(".up, .down").click(function() {
    var $element = this;
    var row = $($element).parents("tr:first");
    var swapRow = $(this).is('.up') ? row.prev() : row.next();
    if ($(this).is('.up')) {
      row.insertBefore(swapRow);
    } else {
      row.insertAfter(swapRow);
    }
    if (swapRow.children()) {
      var tempValue = row.children().first().html();
      row.children().first().html(swapRow.children().first().html());
      swapRow.children().first().html(tempValue);
    }
  });
});

小提琴：https://jsfiddle.net/jithin4u/hx7a0t7L/3/

Answer 2

我假设您想要做的是更新最后一列中的文本，以指示行的新顺序。

我能想到两种方法。一种方法是在任何排序之后重新分配订单，无论它是向上还是向下。

$(document).ready(function () {
  $(".up, .down").click(function () {
    var $element = this;
    var row = $($element).parents("tr:first");
    if($(this).is('.up')){
      row.insertBefore(row.prev());
    }
    else{
      row.insertAfter(row.next());
    }
    row.siblings().andSelf().each(function(i, el){
    	$(el).find('.order').text(i + 1);
    });
  });
});

td {
  padding: 0.5em;
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Body</th>
      <th>Order</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2342</td>  
      <td>Test 1</td>
      <td>Test 1 Body</td>
      <td><span class="order">1</span> <button class='up'>Up </button> <button class='down'>Down </button></td>
    </tr>
    <tr>
      <td>2343</td>  
      <td>Test 2</td>
      <td>Test 2 Body</td>
      <td><span class="order">2</span> <button class='up'>Up </button> <button class='down'>Down </button></td>
    </tr>
    <tr>
      <td>2344</td>  
      <td>Test 3</td>
      <td>Test 3 Body</td>
      <td><span class="order">3</span> <button class='up'>Up </button> <button class='down'>Down </button></td>
    </tr>
  </tbody>
</table>

另一种方法是将顺序值存储在变量中，以分配给它们各自的顺序列。

$(document).ready(function () {
  $(".up, .down").click(function () {
    var $element = this;
    var row = $($element).parents("tr:first");
    if($(this).is('.up')){
      var targetRow = row.prev();
      row.insertBefore(targetRow);
    }
    else{
      var targetRow = row.next();
      row.insertAfter(targetRow);
    }
    
    var targetSortOrder = targetRow.find('.order').text();
    var activeSortOrder = row.find('.order').text();
    targetRow.find('.order').text(activeSortOrder);
    row.find('.order').text(targetSortOrder);
  });
});

td {
  padding: 0.5em;
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Body</th>
      <th>Order</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2342</td>  
      <td>Test 1</td>
      <td>Test 1 Body</td>
      <td><span class="order">1</span> <button class='up'>Up </button> <button class='down'>Down </button></td>
    </tr>
    <tr>
      <td>2343</td>  
      <td>Test 2</td>
      <td>Test 2 Body</td>
      <td><span class="order">2</span> <button class='up'>Up </button> <button class='down'>Down </button></td>
    </tr>
    <tr>
      <td>2344</td>  
      <td>Test 3</td>
      <td>Test 3 Body</td>
      <td><span class="order">3</span> <button class='up'>Up </button> <button class='down'>Down </button></td>
    </tr>
  </tbody>
</table>

显然，这确实需要将文本隔离为一个跨度或其他什么。您可以在不更改标记的情况下完成此操作，但这有点困难。

编辑：在我的示例中，OP查找的逻辑不正确。这是一个修订版。

$(document).ready(function () {
  $(".up, .down").click(function () {
    var $element = this;
    var row = $($element).parents("tr:first");
    if($(this).is('.up')){
      var targetRow = row.prev();
      row.insertBefore(targetRow);
    }
    else{
      var targetRow = row.next();
      row.insertAfter(targetRow);
    }
    
    if(!targetRow.length) return false;
    var targetSortOrder = targetRow.find('td').first().text();
    var activeSortOrder = row.find('td').first().text();
    targetRow.find('td').first().text(activeSortOrder);
    row.find('td').first().text(targetSortOrder);
  });
});

td {
  padding: 0.5em;
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Body</th>
      <th>Order</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2342</td>  
      <td>Test 1</td>
      <td>Test 1 Body</td>
      <td>1 <button class='up'>Up </button> <button class='down'>Down </button></td>
    </tr>
    <tr>
      <td>2343</td>  
      <td>Test 2</td>
      <td>Test 2 Body</td>
      <td>2 <button class='up'>Up </button> <button class='down'>Down </button></td>
    </tr>
    <tr>
      <td>2344</td>  
      <td>Test 3</td>
      <td>Test 3 Body</td>
      <td>3 <button class='up'>Up </button> <button class='down'>Down </button></td>
    </tr>
  </tbody>
</table>