CODEWITHSUNDEEP
javascriptjqueryhtmlrows
Ronny vdb
Ronny vdb

Reputation: 2474

JQuery Swap input values in rows

I am working on a table that I need to be able to move rows up and down. The problem is that I cannot re-insert the row before the previous or next row, because my application relies on the names of the input fields to stay in the same order.

My solution is to swap the values of the input fields, which works, but my code is very ugly and repetitive. 

$(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());
        }
    });
});

I created a fiddle: http://jsfiddle.net/29T7V/

I would really appreciate any suggestions on how to simplify my code. Any ideas on how to update my code to handle x amount of inputs in the rows would be absolutly awesome! TIA!

Upvotes: 1

Views: 681

Answers (2)

dfsq
dfsq

Reputation: 193271

Something wich would work with any number of columns:

$(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);
            }
        });
    });
});

Demo: http://jsfiddle.net/29T7V/

Upvotes: 0

adeneo
adeneo

Reputation: 318232

Something like this maybe

$(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

Upvotes: 1

Related Questions