移动TD元素并使用JQuery重新排序 [英] Move TD Element and reorder with JQuery

问题描述

我一直在尝试重新排列表格元素来设置新的顺序。我认为会抓住tr不会工作，因为它抓住了整个被移动的部分，包括订单号。

我如何去抓取href td的孩子tds？

最后，我一直试图使用replaceWith（），但不确定是否重新排序被移动的项目。

我如何重新排序其余的项目？
移动4 - > 1，1变成2，2 - >变成3 ...

  $（document） .ready（function（）{
 var rowFirstChoice; 
 var rowSecondChoice; $ b $（'。trigger'）。click（function（）{
 if（rowFirstChoice == undefined） {
 $ b $（'。trigger'）。text（'HERE'）; 
 rowFirstChoice = $（this）.closest（'tr'）; 
 rowFirstChoice.find（ ''）。html（'MOVE'）; 
 
} else if（rowSecondChoice == undefined）{
 rowSecondChoice = $（this）.closest（'tr'）; 
 // var tmpChoice = rowSecondChoice; 
 rowSecondChoice.replaceWith（rowFirstChoice）; 
 //注意
 //如何重新排列其余项目？
 // ie 4  - > 1,1变成2,2， - >变成3 ... 
 // END注意
 $（'。trigger'）.text（'MOVE'）; 
 rowFirstChoice = undefined; 
 rowSecondChoice = undefined; 
} 
}）; 
}）; 
  

我一直在JSFIDDLE中尝试这样做。
http://jsfiddle.net/ndsumonu/7/

感谢您的任何建议。

解决方案

您可以在将一行移到另一行之前。

  $（this）.closest（'tr'）。before（rowFirstChoice）; 
  

然后重新编号，您可以使用 text 用一个函数来设置值：

  $（'＃customList> tbody> tr> td：first （函数（i）{
返回i + 1; 
}）; 
  

http://jsfiddle.net/ndsumonu/11/

I have been trying to reorder table elements to set a new order. What I thought would work with grabbing the tr wont work since it grabs the entire piece being moved, including the Order Number.

How do I go about grabbing child tds of the href td?

Last, I have been trying to use replaceWith() but not sure about the reordering with items below the one being moved.

How can I reorder the rest of the items? Moving 4 -> 1, 1 becomes 2, 2 -> becomes 3...

$(document).ready(function() {
var rowFirstChoice;
var rowSecondChoice;
$('.trigger').click(function () {
    if(rowFirstChoice==undefined) {

        $('.trigger').text('HERE');
        rowFirstChoice = $(this).closest('tr');
        rowFirstChoice.find('a').html('MOVE');

    } else if (rowSecondChoice==undefined) {
        rowSecondChoice = $(this).closest('tr');
        //var tmpChoice = rowSecondChoice;
        rowSecondChoice.replaceWith(rowFirstChoice);
        //Notes
        //How can I reorder the rest of the items?
        //i.e. 4 -> 1, 1 becomes 2, 2 -> becomes 3...
        //END Notes
        $('.trigger').text('MOVE');
        rowFirstChoice = undefined;
        rowSecondChoice = undefined;
    }
});
});

I have been attempting this in a JSFIDDLE. http://jsfiddle.net/ndsumonu/7/

Thanks for any suggestions.

解决方案

You can use before to move the one row before the other.

$(this).closest('tr').before(rowFirstChoice);

Then to re-number, you can use text with a function to set the value:

$('#customList > tbody > tr > td:first-child').text(function(i){
    return i + 1;
});

http://jsfiddle.net/ndsumonu/11/

这篇关于移动TD元素并使用JQuery重新排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！