Question

我正在制作一张桌子，我需要能够上下移动行。问题是我无法在上一行或下一行之前重新插入行，因为我的应用程序依赖于输入字段的名称以保持相同的顺序。

我的解决方案是交换输入字段的值，这是有效的，但我的代码非常丑陋和重复。

$(document).ready(function(){
    $(".up,.down").click(function(){
        var row = $(this).parents("tr:first");
        var rowdata1 = row.find('.rowdata1').val();
        var rowdata2 = row.find('.rowdata2').val();
        var rowdata3 = row.find('.rowdata3').val();
        var rowdata4 = row.find('.rowdata4').val();
        var rowdata5 = row.find('.rowdata5').val();

        if ($(this).is(".up")) {
            var tmp1 = row.prev().find('.rowdata1').val();
            var tmp2 = row.prev().find('.rowdata2').val();
            var tmp3 = row.prev().find('.rowdata3').val();
            var tmp4 = row.prev().find('.rowdata4').val();
            var tmp5 = row.prev().find('.rowdata5').val();

            row.prev().find('.rowdata1').val(rowdata1);
            row.prev().find('.rowdata2').val(rowdata2);
            row.prev().find('.rowdata3').val(rowdata3);
            row.prev().find('.rowdata4').val(rowdata4);
            row.prev().find('.rowdata5').val(rowdata5);

            row.find('.rowdata1').val(tmp1);
            row.find('.rowdata2').val(tmp2);
            row.find('.rowdata3').val(tmp3);
            row.find('.rowdata4').val(tmp4);
            row.find('.rowdata5').val(tmp5);
            //row.insertBefore(row.prev());
        } else {
            var tmp1 = row.next().find('.rowdata1').val();
            var tmp2 = row.next().find('.rowdata2').val();
            var tmp3 = row.next().find('.rowdata3').val();
            var tmp4 = row.next().find('.rowdata4').val();
            var tmp5 = row.next().find('.rowdata5').val();

            row.next().find('.rowdata1').val(rowdata1);
            row.next().find('.rowdata2').val(rowdata2);
            row.next().find('.rowdata3').val(rowdata3);
            row.next().find('.rowdata4').val(rowdata4);
            row.next().find('.rowdata5').val(rowdata5);

            row.find('.rowdata1').val(tmp1);
            row.find('.rowdata2').val(tmp2);
            row.find('.rowdata3').val(tmp3);
            row.find('.rowdata4').val(tmp4);
            row.find('.rowdata5').val(tmp5);
            //row.insertAfter(row.next());
        }
    });
});

我创造了一个小提琴：http://jsfiddle.net/29T7V/

我非常感谢有关如何简化代码的任何建议。关于如何更新我的代码以处理行中x输入量的任何想法都绝对是绝对的！ TIA！

Answer 1

这样的事可能

$(document).ready(function () {
    $(".up, .down").on('click', function () {
        var row = $(this).closest('tr').first(),
            way = $(this).hasClass('up') ? 'prev' : 'next';

        for (var i=1; i<6; i++) {
            var sel  = '.rowdata'+i,
                tmp1 = row.find(sel).val(),
                tmp2 = row[way]().find(sel).val();

            row.find(sel).val(tmp2);
            row[way]().find(sel).val(tmp1);
        }
    });
});

FIDDLE

Answer 2

可以使用任意数量的列：

$(document).ready(function () {
    $(".up, .down").click(function () {

        var $row = $(this).closest("tr"), 
            $swap = $row[$(this).is('.up') ? 'prev' : 'next']();

        if (!$swap) return;

        $row.find('td').each(function() {
            var $input = $(this).find('input, select'),
                $swapInput, $swapVal;
            if ($input.length) {
                $swapInput = $swap.children('td:eq(' + this.cellIndex + ')').find('input, select');
                $swapVal = $swapInput.val();
                $swapInput.val($input.val());
                $input.val($swapVal);
            }
        });
    });
});

JQuery交换行中的输入值

2 个答案:

演示：http://jsfiddle.net/29T7V/