Use jquery to write a small feature that changes the order of rows in a table

  • 2020-03-30 02:47:28
  • OfStack

Weekend wrote a small function to change the row order of the table, directly paste code

The table is as follows:
 
<table class="table" id="test_table"> 
<thead> 
<tr> 
<th> time </th> 
<th> details </th> 
<th> operation </th> 
</tr> 
</thead> 
<tbody> 
<tr cid="7.0.0-2014-04-29_11-02-24_123" class="list_line"> 
<td> 
2014-04-29 11:02:24 
</td> 
<td> 
 details  
</td> 
<td> 
<span class="move_btn glyphicon glyphicon-arrow-up" move_act="up"></span> 
<span class="move_btn glyphicon glyphicon-arrow-down" move_act="down"></span> 
</td> 
</tr> 
<tr cid="7.0.0-2014-04-29_11-02-24_915" class="list_line"> 
<td> 
2014-04-28 10:00:00 
</td> 
<td> 
 details  
</td> 
<td> 
<span class="move_btn glyphicon glyphicon-arrow-up" move_act="up"></span> 
<span class="move_btn glyphicon glyphicon-arrow-down" move_act="down"></span> 
</td> 
</tr> 
</tbody> 
</table> 

Js code, which adds class=danger after the change order for the lines to be changed
 
<script type="text/javascript"> 
$(function(){ 
$('.move_btn').click(function(){ 
var move_act = $(this).attr('move_act'); 
$('#test_table tbody tr').removeClass('danger'); 

if(move_act == 'up'){ 
$(this).parent().parent('tr').addClass('danger') 
.prev().before($(this).parent().parent('tr')); 
} 
else if(move_act == 'down'){ 
$(this).parent().parent('tr').addClass('danger') 
.next().after($(this).parent().parent('tr')); 
} 
setTimeout("$('#test_table tbody tr').removeClass('danger');", 2000); 
}); 
}); 
</script> 

After the change, the new order can be submitted according to the unique mark of each line

Make fun of: the company that cries to work overtime = Wolf sex is the company that does not suit normal human existence, take weekend working overtime as the thing that advocate & the standard that evaluates whether the employee has Wolf sex is more bull.

Related articles: