JavaScript moving table row to top of the table on checkbox checked

Question

I am new to Java Scripting, Can any one help for the below code. I tried move the selected checkbox row to top of the table. The code below working for the first time but when I attempt to do again it is not going to top. here is my JavaScript. Here I have added the checkboxes dynamically using Javascript.

$(document).on('change', '[type=checkbox]', function () {

alert("Chk box clicked"+ rl);
//var s1 = $(this).context.status;

//var direction = $(this).attr('data-direction');
var $original = $(this).parents("tr:first");
var $target = $(this).context.status === true ? $original.prev() : $original.next();
var firstrw = tblrw.rows[0].innerText;
var lastrw = tblrw.rows[(tblrw.rows.length)-1].innerText

if ($target.length && $(this).context.status == true)
{
    //for (var i = $target.length; i <= 0; i--) {
    $original.insertBefore($('#chk' + firstrw), ($target));

}
else if ($target.length)
{
    $original.insertAfter($target);
}

});

please help as soon as possible. Thank you in advance for the help.

Answer 1

Basic code:

$('table').on('change', '[type=checkbox]', function () {
  var $this = $(this); // refers to checkbox
  var row = $this.closest('tr'); // row with changed checkbox

  if ( $this.prop('checked') ){ // move to top
    row.insertBefore( row.parent().find('tr:first-child') ); 
  }
  else { // move to bottom
    row.insertAfter( row.parent().find('tr:last-child') );  
  }
});

Code snippet to run and see how it works. Plus jsfiddle http://jsfiddle.net/51rbk65t/

 $('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'); } }); 

 th, td { border: 1px solid #d4d4d4; } thead tr { background-color: #F5F5F5; } tr.c1 { background-color: #D2FFA5; } tr.c2 { background-color: #FFEFBF; } tr.c3 { background-color: #FFCDE3; } tr.c4 { background-color: #CFCDFF; } tr.c5 { background-color: #CDFFE9; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <tr> <th>ID</th> <th>Title</th> <th>Action</th> </tr> </thead> <tbody> <tr class="c1"> <td>1</td> <td>Title 1</td> <td><input type="checkbox" id="c_1" /><label for="c_1">move to top</label></td> </tr> <tr class="c2"> <td>2</td> <td>Title 2</td> <td><input type="checkbox" id="c_2" /><label for="c_2">move to top</label></td> </tr> <tr class="c3"> <td>3</td> <td>Title 3</td> <td><input type="checkbox" id="c_3" /><label for="c_3">move to top</label></td> </tr> <tr class="c4"> <td>4</td> <td>Title 4</td> <td><input type="checkbox" id="c_4" /><label for="c_4">move to top</label></td> </tr> <tr class="c5"> <td>5</td> <td>Title 5</td> <td><input type="checkbox" id="c_5" /><label for="c_5">move to top</label></td> </tr> </tbody> </table>