"Row on top when check and uncheck checkbox sorting"
Bootstrap 3.3.0 Snippet by omir

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
.new-b{background: #1f6df7; color#fff !important; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: