Jump to content

Move tr to top of table if input changed


Adamhumbug

Recommended Posts

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

 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

  • 1 month later...

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

 

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.