Jump to content
Adamhumbug

Move tr to top of table if input changed

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

 

Share this post


Link to post
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);
  });

 

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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

 

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • 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.