移动TD元素并使用JQuery重新排序

时间:2014-12-17 21:26:33

标签: javascript jquery html

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

如何抓住href td的孩子tds?

最后,我一直在尝试使用replaceWith()但不确定正在移动的项目下方的项目的重新排序。

如何重新排列其余项目? 移动4 - > 1,1变为2,2→>变成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;
    }
});
});

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

感谢您的任何建议。

2 个答案:

答案 0 :(得分:1)

您可以使用before将一行移到另一行之前。

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

然后要重新编号,您可以使用text和函数来设置值:

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

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

答案 1 :(得分:0)

似乎你想做这样的事情:

$(document).ready(function() {
    var rowFirstChoice;
    var rowSecondChoice;
    $('.trigger').click(function () {
        if(rowFirstChoice==undefined) {            
            $('.trigger').text('HERE');            
            this.innerHTML = "MOVE";
            rowFirstChoice = $(this).parent().siblings().find("> input");
        } else if (rowSecondChoice==undefined) {            
            rowSecondChoice = $(this).parent().siblings().find("input");        

            var firstValue = rowFirstChoice.val();
            rowFirstChoice.val(rowSecondChoice.val());
            rowSecondChoice.val(firstValue);

            $('.trigger').text('MOVE');
            rowFirstChoice = undefined;
            rowSecondChoice = undefined;
        }
    });
});

这将交换输入的值,从而维持订单号和ID。

请在此处查看:JSFiddle