在 JQuery 中交换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/617274/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Swapping rows in JQuery
提问by DotnetDude
If I have a table as shown below, and have a up and down arrow that moves rows up and down, how would I go about swapping rows in JQuery?
如果我有一个如下所示的表格，并且有一个上下箭头可以上下移动行，我将如何在 JQuery 中交换行？
<tr id="Row1">
<td>Some label</td>
<td>Some complex control</td>
</tr>
<tr id="Row2">
<td>Some label</td>
<td>Some complex control</td>
</tr>
<tr id="Row3">
<td>Some label</td>
<td>Some complex control</td>
</tr>
采纳答案by cobbal
$("#Row1").after($("#Row2"));
will work
将工作
回答by
Here's another solution.
这是另一个解决方案。
To move a row down:
向下移动一行：
jQuery("#rowid").next().after(jQuery("#rowid"));
To move a row up:
向上移动一行：
jQuery("#rowid").prev().before(jQuery("#rowid"));
回答by Tod Thomson
Here's a slightly expanded example, hoping you will find it useful... :)
这是一个稍微扩展的示例，希望您会发现它有用... :)
$('table').on('click', '.move-up', function () {
var thisRow = $(this).closest('tr');
var prevRow = thisRow.prev();
if (prevRow.length) {
prevRow.before(thisRow);
}
});
$('table').on('click', '.move-down', function () {
var thisRow = $(this).closest('tr');
var nextRow = thisRow.next();
if (nextRow.length) {
nextRow.after(thisRow);
}
});
回答by svinto
To move Row1 one step down, you'd do:
要将 Row1 向下移动一步，您可以执行以下操作：
$me = $("#Row1");
$me.after($me.nextSibling());
回答by ólafur Waage
Here's a pluginthat does drag and drop table rows
回答by Akshay
Here is the code to swap the rows. Lets take #Row1 and #Row3
这是交换行的代码。让我们取 #Row1 和 #Row3
$('#Row1').replaceWith($('#Row3').after($('#Row1').clone(true)));
The clone(true) is used so that events are also taken into account.
使用 clone(true) 以便还考虑事件。
If you want to move row up and down then use this code. To move row UP
如果要上下移动行，请使用此代码。向上移动行
var tableRow = $("#Row1");
tableRow.insertBefore(tableRow.prev());
To move row DOWN
向下移动行
var tableRow = $("#Row1");
tableRow.insertAfter(tableRow.next());
回答by Ilya Birman
I would try:
我会尝试：
var tmp = $ ('#Row1')
$ ('#Row1').remove
$ ('#Row2').after ($ ('#Row1'))
But I guess it's better to swap rows' contents instead of swapping rows themselves, so that you can rely on numbering. Thus,
但我想最好是交换行的内容而不是交换行本身，这样您就可以依靠编号。因此，
var tmp = $ ('#Row1').html ()
$ ('#Row1').html ($ ('#Row2').html ())
$ ('#Row2').html (tmp)
回答by Jaroslav ?treit
I am using drag and drop plugin for swap cathegories in table (with subcathegories), and after not working. insertAfter works. similiar topic
我正在使用拖放插件来交换表中的 cathegories（带有 subcathegories），并且在不工作之后。insertAfter 工作。 类似话题
回答by Francisco Goldenstein
This is a generic function that has 3 parameters: source row, target row and a boolean indicating if the row is moving up or down.
这是一个具有 3 个参数的通用函数：源行、目标行和一个布尔值，指示该行是向上还是向下移动。
var swapTR = function (sourceTR, targetTR, isBefore) {
sourceTR.fadeOut(300, function () {
sourceTR.remove();
if (isBefore) {
targetTR.before(sourceTR);
}
else {
targetTR.after(sourceTR);
}
sourceTR.fadeIn(300);
initializeEventsOnTR(sourceTR);
});
};
You can use it this way:
你可以这样使用它：
swapTR(sourceTR, targetTR, true);
回答by Taki7o7
I usally do something like this:
我通常做这样的事情：
<table id="mytable">
<tr>
<td>-------------ROW 1-----------</td>
<td><input type="button" value="↑" class="move up" disabled /></td>
<td><input type="button" value="↓" class="move down" /></td>
</tr>
<tr>
<td>-------------ROW 2-----------</td>
<td><input type="button" value="↑" class="move up" /></td>
<td><input type="button" value="↓" class="move down" /></td>
</tr>
<tr>
<td>-------------ROW 3-----------</td>
<td><input type="button" value="↑" class="move up" /></td>
<td><input type="button" value="↓" class="move down" /></td>
</tr>
<tr>
<td>-------------ROW 4-----------</td>
<td><input type="button" value="↑" class="move up" /></td>
<td><input type="button" value="↓" class="move down" disabled /></td>
</tr>
</table>
<script>
$('#mytable input.move').click(function() {
var row = $(this).closest('tr');
if ($(this).hasClass('up')){
row.prev().before(row);
}
else{
row.next().after(row);
}
$(this).closest('table').find('tr:first').find('td:eq(1) input').prop('disabled', true);
$(this).closest('table').find('tr:last').find('td:eq(2) input').prop('disabled', true );
$(this).closest('table').find('tr').not(':first').not(':last').find('td:eq(1) input').prop('disabled', false);
$(this).closest('table').find('tr').not(':first').not(':last').find('td:eq(2) input').prop('disabled', false);
});
</script>
So this also siables UP in first row and DOWN in last row. You may change it to go on top again if going down in last row. But thats how i've needed it.
所以这也使第一行向上，最后一行向下。如果在最后一行下降，您可以将其更改为再次进入顶部。但这就是我需要它的方式。
Greetings
你好
