<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Check row on top when check and uncheck checkbox </h2> </div> </div> <table class="table table-condensed table-bordered table-hover table-striped"> <thead> <tr class="thead-tr"> <th colspan="3" class="text-center" >SELECT PAGE</th> </tr> <tr class="new-b"> <th class="text-center" style="width:50px;">SELECT </th> <th class="text-center"> PAGE</th> <th class="text-center">CURRENT</th> </tr> </thead> <tbody style="text-align: center;" class="ui1"> <tr class="danger"> <td><input type="checkbox" id="one"/></td> <td>New1</td> <td>New2</td> </tr> <tr class="info"> <td><input type="checkbox" id="two"/></td> <td>New3</td> <td>New4</td> </tr> <tr class="warning"> <td><input type="checkbox" id="three"/></td> <td>New5</td> <td>New6</td> </tr> <tr class="active"> <td><input type="checkbox" id="four"/> </td> <td>New7</td> <td>New8</td> </tr> <tr class="success"> <td><input type="checkbox" id="six"/></td> <td>New9</td> <td>New10</td> </tr> </tbody> </table>

.new-b{background: #1f6df7; color#fff !important; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script> <script> var list1 = $(".ui1"); var html=$(".ui1").html(); sortItems(list1); function sortItems(list1){ origOrder = list1.children(); list1.on("click", ":checkbox", function() { var i, checked = document.createDocumentFragment(), unchecked = document.createDocumentFragment(); for (i = 0; i < origOrder.length; i++) { if (origOrder[i].getElementsByTagName("input")[0].checked) { checked.appendChild(origOrder[i]); } else { unchecked.appendChild(origOrder[i]); } } list1.append(checked).append(unchecked); }); } </script>