jquery sort rows and values

Question

Based in this ex. http://jsfiddle.net/vaDkF/160/ how can change input values to increase or decrease value when click on UP or DOWN mantaining order (1.2.3.4...) of values? Also how can add another button to remove row?

Increase or decrease input value based on DOWN or UP action <input type=hidden name=sort[] value=1> So if I moveup row there should increase current value and to decrease which element has moved down. — gonis
– gonis, Commented Aug 15, 2011 at 17:14

Community · Accepted Answer · 2017-05-23 11:58:52Z

1

$(document).ready(function(){
    $(".up,.down").click(function(){
        var row = $(this).closest("tr");
        if ($(this).is(".up")) {
            row.prev().before(row);
        } else if ($(this).is(".down")) {
            row.next().after(row);
        }

        ResetSort();
    });

    $('.down').after(' <a href="#" class="delete">Delete</a>');
    $('.delete').click(function() {
        $(this).closest('tr').remove();
    });
});

function ResetSort() {
    $(':hidden[name="sort"]').each(function (i,v) {
        $(v).val(i + 1);
    });
}

Here is a working example: http://jsfiddle.net/JUh74/5/

UPDATE: Replaced parents('tr:first') with closest('tr'), as pointed out by fudgey

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Aug 15, 2011 at 18:07

Shagglez

1,5324 gold badges21 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

gonis Over a year ago

it seems not work as well look her and press show. always return value 1

Mottie Over a year ago

+1 for this more complete answer... The function you are using to "show" the input value only looks at the first input value, use this code instead var num = $(this).closest('tr').find('input').val();. Here is an updated demo. Either way, @Shagglez has a more complete answer for you so you should accept it.

Shagglez Over a year ago

@gonis - I'm not sure what you mean, what returns value 1? The actual solution is slightly different to what you wanted (values are forced to be the same according to their position, rather than increment/decrement) but behaviour is the same. (at)fudgey - .val() will always return the first value. I take your point about closest() (vs parents()), I wasn't aware of it earlier, but it's more efficient and better suited to current situation.

Shagglez Over a year ago

@gonis - oh I didn't see someone updated example - here is a working version of "show" (I didn't put it there) - jsfiddle.net/JUh74/12

Mottie · Accepted Answer · 2011-08-15 19:07:16Z

0

Oops... I misread your question. You want to keep the "value" or the "text" in order?

Add this inside the click function:

$('input').each(function(i){
    $(this).val(i+1);
});

so you end up with something like this:

$(document).ready(function(){
    $(".up,.down").click(function(){
        var row = $(this).parents("tr:first");
        if ($(this).is(".up")) {
            row.insertBefore(row.prev());
        } else {
            row.insertAfter(row.next());
        }
        // renumber input values (not the text)
        $('input').each(function(i){
            $(this).val(i+1);
        });
    });
});

edited Aug 15, 2011 at 19:07

answered Aug 15, 2011 at 17:41

Mottie

86.7k30 gold badges132 silver badges248 bronze badges

2 Comments

gonis Over a year ago

value order. First row must have always value 1, Second 2 ect. independently from order I make. Text go up and down but input value must have always 1.2.3 order

Mottie Over a year ago

The value changes, but the text of the row doesn't. I just edited my answer to add one to the value so it starts with one instead of zero.

Collectives™ on Stack Overflow

jquery sort rows and values

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related