jQuery: move table row to first position and then back

Question

I need to move a table row from a position to the first in the table and after clicking again to the old position.

I have a list of checkboxes in a table. These are coming from code behind and are already sorted. If I click on a checkbox, I want to move this entry to the begin of the list. If the users unchecks this box or clicks on another box, it shall be moved to the old position.

for better understanding:

 [ ] 1
 [ ] 3
 [ ] A
 [ ] B
 [ ] C

After clicking on e.g. [ ] C:

 [X] C
 [ ] 1
 [ ] 3
 [ ] A
 [ ] B

After clicking on e.g. [ ] 3 C has got the old position and 3 has moved to the top.

 [X] 3
 [ ] 1
 [ ] A
 [ ] B
 [ ] C

I've managed to get a row to the top. But how do I move a row again to the old position?

example with working code for moving to top:

http://jsfiddle.net/6F5mQ/

Answer 1

I would store each tr's position and move it back if/when needed.

I updated the code according to ShadowScripter's comment

http://jsfiddle.net/gguNM/1/

New update http://jsfiddle.net/gguNM/2/

$('table tr').each(function () {
  var $this  = $(this).data({position: $(this).index()}),
      $table = $this.closest('table'),
      $input = $this.find('input');

  $input.bind('click', function (e) {
    var $first = $table.find('tr:first'),
        position;

    if ($(this).is(':checked')) {
      position = $first.data('position');
      $table.find('tr input').not($(this)).removeAttr('checked');

      if (position != 0) $first.insertAfter($table.find('tr').eq(position));
      $this.prependTo($table);
    } else if ($this.data('position') != 0) {
      position = $this.data('position');
      $this.insertAfter($table.find('tr').eq(position));                
    }
  });
});​

Answer 2

After seeing all the other examples, and how they didn't quite work as intended, I decided to make one that works.

Here's the example | With effects | Code

var $tbody =  $("table tbody");

var last_position = -1;
$("input").click(function(){
    var $row = $(this).closest("tr"),
        $first_row = $tbody.find("tr:first-child"),
        $trs = $tbody.find("tr");

    if($row.index() == $first_row.index()){
        if( last_position > 0 ){
            $trs.eq(last_position).after($row);
            last_position = -1;
        }
        return;
    }else if(last_position > 0){
       $trs.eq(last_position).after($first_row);
    }

    $tbody.find("input").not(this).attr("checked", false);

    last_position = $row.index();

    $tbody.prepend($row);
});

---

There are two types of actions you describe

1. User clicks input that is not first row, first row moves back, this row moves to top
   

2. User clicks first row input, which row have already been moved, first row moves back
   

When user clicks the input, we're going to need to know where it was before we moved it, so we're going to store the last position. We're giving it a value of -1, as we need a default, meaning all rows are where they originally were.

var last_position = -1;

Then we define the variables we're going to use

var $row = $(this).closest("tr"),               //input row clicked
    $first_row = $tbody.find("tr:first-child"), //first row
    $trs = $tbody.find("tr");                   //all the table rows, so we can switch 'em around

Then we check whether or not it was the first row that was clicked, and reset last_position if it was. We also make sure that the last position isn't already reset or at the 0th position, since it shouldn't move in those cases.

if($row.index() == $first_row.index()){
    if( last_position > 0 ){
        $trs.eq(last_position).after($row);
        last_position = -1;
    }
    return;
}else if(last_position > 0){
   $trs.eq(last_position).after($first_row);
}

Lastly, we uncheck all the other boxes, update the last position to this row and then put it at the top.

$tbody.find("input").not(this).attr("checked", false);

last_position = $row.index();

$tbody.prepend($row);

Answer 3

The best thing to do is to just have the "normal" order of the boxes written somewhere and sort all the boxes again, instead of trying to place one box in its old place.

Answer 4

You could do something like (edited to clean up the code and fix some problems)

var lastIndex;
$("input").click(function() {
    var $tbody = $(this).closest("tbody");
    var $tr = $(this).closest("tr");
    if($tr.index() === 0) return;
    $tbody.find("tr:first input:checkbox").prop('checked', false);
    if (lastIndex === undefined) {
        lastIndex = $tr.index();
        $tr.insertBefore($tbody.children("tr:first"));
    } else {
        $tbody.find("tr:first").insertAfter($("tr:eq(" + lastIndex + ")", $tbody))
        lastIndex = $tr.index();
        $tr.insertBefore($tbody.children("tr:first"));
    }
});

fiddle here http://jsfiddle.net/6F5mQ/2/