Javascript Jquery如何在选定行上下移动X行
我有一个HTML表格,每行有一个复选框 目标是为选中的行创建一个向上或向下(表标题上的按钮) 但是我不想上移/下移一行,而是想上移/下移5行 我已经完成了Up+1和Down-1,但是我不知道如何实现Up+5和Down-5脚本 这是我的密码Javascript Jquery如何在选定行上下移动X行,javascript,jquery,Javascript,Jquery,我有一个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="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> </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>
Up+1Down-1
向上+5向下-5
等级
身份证件
产品
16
2119
试验
17
2120
测试1
18
2121
测试2
19
2122
测试3
20
2123
测试4
99999
2464
测试5
$(文档).ready(函数(){
//上下1
$(“#向上”)。在('click',函数(事件){
event.preventDefault();
$('#rowclick')。查找('tr')。每个(函数(){
if($(this).find('input[type=checkbox]”)是(':checked')){
var current=$(this).closest('tr')
var previous=当前的prev('tr');
如果(上一个.length!==0){
当前。插入之前(先前);
}
}
});
});
$('#down')。在('click',函数(e){
e、 预防默认值();
$($('#rowclick').find('tr').get().reverse()).each(函数(){
if($(this).find('input[type=checkbox]”)是(':checked')){
var current1=$(this).closest('tr')
var next=current1.next('tr');
如果(next.length!==0){
当前1.插入后面(下一个);
}
}
});
});
//结束倒转1
//上下5
$('#up5')。在('click',函数(事件){
event.preventDefault();
$('#rowclick')。查找('tr')。每个(函数(){
if($(this).find('input[type=checkbox]”)是(':checked')){
var current=$(this).closest('tr')
var previous=当前的prev('tr');
如果(上一个.length!==0){
//当前.insertBefore($(“#行单击”).find(“tbody”).find(“tr:nth(3)”);
当前插入前($('tr:eq(3)');
}
}
});
});
});
非常感谢您的帮助表:
<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>
兰基德产品
162119试验
172120测试1
182121测试2
192122测试3
202123测试4
99992464测试5
以下内容将允许您上移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(){
按钮选择=$(this.attr('id');
$('.ch')。每个(函数(){
如果($(this).is(':checked')){
行=$(this).closest(“tr”)
如果(按钮选择=='up'){
row.insertBefore(row.prev())
}
如果(按钮选择=='down'){
row.insertAfter(row.next())
}
如果(按钮选择=='up5'){
对于(i=0;对于答案,它是有效的,但是对于向下按钮,如果您选择了多行,则该按钮不起作用。您需要反转所选行的选择code
,我假设您将使复选框相互排斥,但您确实说了“行”是否希望多个选定的行一起移动?是的,我希望多个行被选择在应答中选中“编辑”。如果需要新表的样式,请通知我。@AlexTT请参阅应答结尾。
$(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()) }
}
})
})