Move tr to top of table if input changed

[Adamhumbug]

Hi all,

I have a table that is being created with a select statement.

It has 3 tds, the third being a text box.

When the user fills in the textbox i would like it to go to the top of the table.

I have found some code that uses checkboxes but as i am very new to js and jq i would really appreciate help on this.

I would prefer this to be written in js as i understand it better.

 

The code that i found is below and i have tried to modify it do what i want without any joy.

 $('table').on('change', '[type=checkbox]', function () {
     var $this = $(this);
     var row = $this.closest('tr');
     if ( $this.prop('checked') ){ // move to top
        row.insertBefore( row.parent().find('tr:first-child') )
            .find('label').html('move to bottom'); 
     }
     else { // move to bottom
        row.insertAfter( row.parent().find('tr:last-child') )
            .find('label').html('move to top');  
     }
});

I would appreciate any help with this.

Kind Regards

 

[Adamhumbug]

I have found what feels like quite a nasty way of doing what i wanted.

$('#equipmentTable input.eqQty').focusout(function() {
      var row = $(this).closest('tr');
      if ($(this).hasClass('up'))
          row.insertBefore( row.parent().find('tr:first-child') )
            .find('label').html('move to bottom'); 
      else
          row.next().after(row);
  });

 

[requinix]

If "row" is the row you want to move around within the current table, then

row.parent().prepend(row); // move to beginning
row.parent().append(row); // move to end

 

[Adamhumbug]

I have been using the following code to move the tr to the top if the input is changed.

$('#equipmentTable input.eqQty').focusout(function() {
      var row = $(this).closest('tr');
      if ($(this).hasClass('up'))
          row.insertBefore( row.parent().find('tr:first-child') )
            .find('label').html('move to bottom'); 
      else
          row.next().after(row);
  });

I have actually found it really annoying and have decided to look at another approach.

I would actually like it to move to the top of the table but appear underneath all of the other rows that have something in the input box.

This will mean that the first changed textbox will be at the top, second will be second and so on.  Ideally it wont move if you change it.

 

This is well above my javascript knowledge so would appreciate some assistance.  I have been playing with the insertBefore and making it insertAfter but have been unable to get it to do what i wanted.

 

Thanks in advance,

 

Kind Regards

 

Adam

 

 

[requinix]

Use two TBODYs, the first with edited rows and the second without. When one of the rows in the second gets edited, move it to the end of the first.

[Adamhumbug]

Ahh great idea, thanks