向上/向下移动并更改订单javascript

时间：2016-07-22 13:45:49

标签： javascript

所以我有一个带有行的表和两个连接到列的按钮。当我单击向上按钮时，行向上，否则向下。问题是我想实现那些列的顺序。例如，如果我的行已经上升，那么列顺序应该具有它所更改的行的顺序。我该怎么做？我在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>

有什么建议吗？

2 个答案:

答案 0 :(得分：2)

这会有帮助吗？

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/

答案 1 :(得分：0)

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

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

$(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>

相关问题
最新问题