<div class="container">
<div class="row">
<section class="content">
<h1>Table Filter</h1>
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-body">
<div class="pull-right">
<div class="btn-group"> <button type="button" class="btn btn-success btn-filter" data-target="greenn">Engg</button> <button type="button" class="btn btn-warning btn-filter" data-target="yelloww">Doctor</button> <button type="button" class="btn btn-danger btn-filter" data-target="redd">Teacher</button> <button type="button" class="btn btn-default btn-filter" data-target="all">All</button> </div>
</div>
<div class="table-container">
<table class="table table-filter">
<tbody>
<tr data-status="greenn">
<td>
<div class="ckbox"> <input type="checkbox" id="checkbox1"> <label for="checkbox1"></label> </div>
</td>
<td> </td>
<td>
<div class="media"> <a href="#" class="pull-left"> <img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1559454811/team-1.jpg" class="media-photo"> </a>
<div class="media-body">
<h4 class="title"> William <span class="pull-right greenn">(Engg)</span> </h4>
<p class="summary">William is working at Google Inc </p>
</div>
</div>
</td>
</tr>
<tr data-status="yelloww">
<td>
<div class="ckbox"> <input type="checkbox" id="checkbox3"> <label for="checkbox3"></label> </div>
</td>
<td> </td>
<td>
<div class="media"> <a href="#" class="pull-left"> <img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1559454840/team-2.jpg" class="media-photo"> </a>
<div class="media-body">
<h4 class="title"> Mark steve <span class="pull-right yelloww">(Doctor)</span> </h4>
<p class="summary">Mark Steve is working as a doctor at Viues Hospitals</p>
</div>
</div>
</td>
</tr>
<tr data-status="redd">
<td>
<div class="ckbox"> <input type="checkbox" id="checkbox2"> <label for="checkbox2"></label> </div>
</td>
<td> </td>
<td>
<div class="media"> <a href="#" class="pull-left"> <img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1559454870/team-3.jpg" class="media-photo"> </a>
<div class="media-body">
<h4 class="title"> Samso Din <span class="pull-right redd">(Teacher)</span> </h4>
<p class="summary">Samso Din is working as an teacher Mark School</p>
</div>
</div>
</td>
</tr>
<tr data-status="greenn" class="selected">
<td>
<div class="ckbox"> <input type="checkbox" id="checkbox4" checked> <label for="checkbox4"></label> </div>
</td>
<td> </td>
<td>
<div class="media"> <a href="#" class="pull-left"> <img src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1559454900/team-4.jpg" class="media-photo"> </a>
<div class="media-body">
<h4 class="title"> Timothi Singla <span class="pull-right greenn">(Engg)</span> </h4>
<p class="summary">Timothi Singla is working as a software engineer at apple Inc.</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
body {
font-family: 'Open Sans', sans-serif;
color: #353535;
background-color: #E0E0E0
}
.content h1 {
text-align: center
}
.content .content-footer p {
color: #6d6d6d;
font-size: 12px;
text-align: center
}
.content .content-footer p a {
color: inherit;
font-weight: bold
}
.panel {
border: 1px solid #ddd;
background-color: #fcfcfc
}
.panel .btn-group {
margin: 15px 0 30px
}
.panel .btn-group .btn {
transition: background-color .3s ease
}
.table-filter {
background-color: #fff;
border-bottom: 1px solid #eee
}
.table-filter tbody tr:hover {
cursor: pointer;
background-color: #eee
}
.table-filter tbody tr td {
padding: 10px;
vertical-align: middle;
border-top-color: #eee
}
.table-filter tbody tr.selected td {
background-color: #eee
}
.table-filter tr td:first-child {
width: 38px
}
.table-filter tr td:nth-child(2) {
width: 35px
}
.ckbox {
position: relative
}
.ckbox input[type="checkbox"] {
opacity: 0
}
.ckbox label {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.ckbox label:before {
content: '';
top: 1px;
left: 0;
width: 18px;
height: 18px;
display: block;
position: absolute;
border-radius: 2px;
border: 1px solid #bbb;
background-color: #fff
}
.ckbox input[type="checkbox"]:checked+label:before {
border-color: #2BBCDE;
background-color: #2BBCDE
}
.ckbox input[type="checkbox"]:checked+label:after {
top: 3px;
left: 3.5px;
content: '\e013';
color: #fff;
font-size: 11px;
font-family: 'Glyphicons Halflings';
position: absolute
}
.table-filter .star {
color: #ccc;
text-align: center;
display: block
}
.table-filter .star.star-checked {
color: #F0AD4E
}
.table-filter .star:hover {
color: #ccc
}
.table-filter .star.star-checked:hover {
color: #F0AD4E
}
.table-filter .media-photo {
width: 35px
}
.table-filter .media-body {
display: block
}
.table-filter .media-meta {
font-size: 11px;
color: #999
}
.table-filter .media .title {
color: #2BBCDE;
font-size: 14px;
font-weight: bold;
line-height: normal;
margin: 0
}
.table-filter .media .title span {
font-size: .8em;
margin-right: 20px
}
.table-filter .media .title span.greenn {
color: #5cb85c
}
.table-filter .media .title span.yelloww {
color: #f0ad4e
}
.table-filter .media .title span.redd {
color: #d9534f
}
.table-filter .media .summary {
font-size: 14px
}
$(document).ready(function () {
$('.star').on('click', function () {
$(this).toggleClass('star-checked');
});
$('.ckbox label').on('click', function () {
$(this).parents('tr').toggleClass('selected');
});
$('.btn-filter').on('click', function () {
var $target = $(this).data('target');
if ($target != 'all') {
$('.table tr').css('display', 'none');
$('.table tr[data-status="' + $target + '"]').fadeIn('slow');
} else {
$('.table tr').css('display', 'none').fadeIn('slow');
}
});
});