Adamhumbug Posted February 16, 2019 Share Posted February 16, 2019 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 More sharing options...
Adamhumbug Posted February 16, 2019 Author Share Posted February 16, 2019 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 More sharing options...
requinix Posted February 17, 2019 Share Posted February 17, 2019 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 Link to comment Share on other sites More sharing options...
Adamhumbug Posted March 26, 2019 Author Share Posted March 26, 2019 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 More sharing options...
requinix Posted March 26, 2019 Share Posted March 26, 2019 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. Link to comment Share on other sites More sharing options...
Adamhumbug Posted March 26, 2019 Author Share Posted March 26, 2019 Ahh great idea, thanks Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.