javascript - Jquery如何向上/向下移动X行所选行

Question

我有一个 HTML 表格，每行都有一个复选框目标是对选中的行进行向上或向下(表格标题上的按钮)。

但是我不想向上/向下移动一行，而是想向上/向下移动 5 行

我已经完成了Up+1和Down-1，但我不知道如何实现Up+5和Down-5脚本

这是我的代码

<button id="up">Up +1</button><button id="down">Down-1</button>
<button id="up5">Up +5</button><button id="down5">Down-5</button>

<table id="rowclick" class="table table-striped table-bordered table-hover 
flip-content">
<thead class="flip-header">
<tr>
<th colspan="2">
Rank                                                
</th>
<th>
ID                                              
</th>
<th>
Product                                             
</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX parent parent-hide" id="item-2119">
<td>
16                                                      
</td>
<td>
2119                                                        
</td>
<td>
test                                                        
</td>
<td class="center">
<input type="checkbox">
</td>
</tr>
<tr class="odd gradeX parent parent-hide" id="item-2120">
<td>
17                                                      
</td>
<td>
2120                                                        
</td>
<td>
test1                                                   
</td>
<td class="center">
<input type="checkbox">
</td>
</tr>
<tr class="odd gradeX parent parent-hide" id="item-2121">
<td>
18                                                      
</td>
<td>
2121                                                        
</td>
<td>
Test2                                                       
</td>
<td class="center">
<input type="checkbox">
</td>
</tr>
<tr class="odd gradeX parent parent-hide" id="item-2122">
<td>
19                                                      
</td>
<td>
2122                                                        
</td>
<td>
Test 3                                                      
</td>
<td class="center">
<input type="checkbox">
</td>
</tr>
<tr class="odd gradeX parent parent-hide" id="item-2123">
<td>
20                                                      
</td>
<td>
2123                                                        
</td>
<td>
test4                                                       
</td>
<td class="center">
<input type="checkbox">
</td>
</tr>
<tr class="odd gradeX parent parent-hide" id="item-2464">
<td>
99999                                                       
</td>
<td>
2464                                                        
</td>
<td>
test 5                                                      
</td>
<td class="center">
</td>
</tr>

</tbody>
</table>


<script type="text/javascript">

$(document).ready(function(){
//Up-Down1
$('#up').on('click',function(event){
event.preventDefault();
$('#rowclick').find('tr').each(function(){

if($(this).find('input[type=checkbox]').is(':checked')){

var current = $(this).closest('tr')
var previous = current.prev('tr');
if(previous.length !== 0){
current.insertBefore(previous);
}
}
});
});


$('#down').on('click',function(e){
e.preventDefault();
$($('#rowclick').find('tr').get().reverse()).each(function(){

if($(this).find('input[type=checkbox]').is(':checked')){
var current1 = $(this).closest('tr')
var next = current1.next('tr');
if(next.length !== 0){
current1.insertAfter(next);
}
}
});
});
//End Up-Down1

//Up-Down5
$('#up5').on('click',function(event){
event.preventDefault();
$('#rowclick').find('tr').each(function(){

if($(this).find('input[type=checkbox]').is(':checked')){

var current = $(this).closest('tr')
var previous = current.prev('tr');
if(previous.length !== 0){
//current.insertBefore($("#rowclick").find("tbody").find("tr:nth(3)"));
current.insertBefore($('tr:eq(3)'));
}
}
});
});
});


</script>

非常感谢您的帮助

Answer 1

表:

<table border='1'>
<th>RANK</th><th>ID</th><th>PRODUCT</th>
<tr><td>16</td><td>2119 test</td><td><input class='ch' type='checkbox'></td></tr>
<tr><td>17</td><td>2120 test1</td><td><input class='ch' type='checkbox'></td></tr>
<tr><td>18</td><td>2121 test2</td><td><input class='ch' type='checkbox'></td></tr>
<tr><td>19</td><td>2122 test3</td><td><input class='ch' type='checkbox'></td></tr>
<tr><td>20</td><td>2123 test4</td><td><input class='ch' type='checkbox'></td></tr>
<tr><td>99999</td><td>2464 test5</td><td><input class='ch' type='checkbox'></td></tr>
</table>

以下内容将允许您向上移动 1、向下移动 1、向上移动 5、向下移动 5:

$(document).on('click', '#up, #down, #up5, #down5', function() {
    button_choice = $(this).attr('id'); 
    $('.ch').each(function() {
       if($(this).is(':checked')) {
          row = $(this).closest("tr")
          if(button_choice == 'up') {
            row.insertBefore(row.prev())
          }
          if(button_choice == 'down') {
            row.insertAfter(row.next())
          }
          if(button_choice == 'up5') {
            for(i=0;i<4;i++) { row.insertBefore(row.prev()) }
          } 
          if(button_choice == 'down5') {
            for(i=0;i<4;i++) { row.insertAfter(row.next()) }
          }  
       }
})

*****编辑********

以下代码经过修改，允许多选行，并确保您无法在表格标题上方移动:

$(document).on('click', '#up, #down, #up5, #down5', function() {
    button_choice = $(this).attr('id'); 
    $('.ch:checked').each(function() {

          row = $(this).closest("tr");

          row.css('background', 'hotpink');
          checked_length = $('.ch:checked').length;

          if(button_choice == 'up') {
            if(row.index() > 1) {
            row.insertBefore(row.prev())
            }
          }
          if(button_choice == 'down') {
            for(i=0;i<checked_length;i++) { row.insertAfter(row.next()) }
          }
          if(button_choice == 'up5') {
            for(i=0;i<checked_length+3;i++) { if(row.index() > 1) { row.insertBefore(row.prev()) } }
          } 
          if(button_choice == 'down5') {
            for(i=0;i<checked_length+4;i++) { row.insertAfter(row.next()) }
          }  
})
}) 

这是FIDDLE