<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"> <br /><br /> <div class="col-lg-4"> <a href="#" class="btn btn-sm btn-primary" id="showNames">Show Full Names</a> <a href="#" class="btn btn-sm btn-danger" id="hideNames">Hide Full Names</a> </div> <div class="col-lg-4"> <input type="search" id="search" name="search" value="" class="form-control" placeholder="Search"> </div> <br /><br /> </div> <div class="row"> <div class="col-lg-12"> <table class="table table-bordered" id="roster-table"> <thead> <tr class="bg-primary"> <th style="width: 180px; text-align: left;">Location</th> <th>Mon</th> <th>Tues</th> <th>Wed</th> <th>Thurs</th> <th>Fri</th> </tr> </thead> <tbody class="context"> <tr> <td class="info" style="text-align: left;">Mater Brisbane (MMB)</td> <td> <span data-toggle="tooltip" data-placement="right" title="Robert Clarke" class="initials">RC </span> <span class="hidden fullName">Robert Clarke</span> </td> <td> <span class="hidden fullName"></span> </td> <td> <span class="hidden fullName"></span> </td> <td> <span class="hidden fullName"></span> </td> <td> <span data-toggle="tooltip" data-placement="right" title="Lora Medoro" class="initials">LM </span> <span class="hidden fullName">Lora Medoro</span> </td> </tr> <tr> <td class="info" style="text-align: left;">Coorparoo (COO)</td> <td> <span data-toggle="tooltip" data-placement="right" title="Sanjay Dhupelia" class="initials">SD </span> <span class="hidden fullName">Sanjay Dhupelia</span> </td> <td> <span class="hidden fullName"></span> </td> <td> <span class="hidden fullName"></span> </td> <td> <span class="hidden fullName"></span> </td> <td> <span data-toggle="tooltip" data-placement="right" title="Todd Staria" class="initials">TXS </span> <span class="hidden fullName">Todd Staria</span> </td> </tr> <tr> <td class="info" style="text-align: left;">Beenleigh (BNL)</td> <td> <span class="hidden fullName"></span> </td> <td> <span data-toggle="tooltip" data-placement="right" title="Thomas Martin" class="initials">TWM </span> <span class="hidden fullName">Thomas Martin</span> </td> <td> <span data-toggle="tooltip" data-placement="right" title="Lora Medoro" class="initials">LM </span> <span class="hidden fullName">Lora Medoro</span> </td> <td> <span data-toggle="tooltip" data-placement="right" title="Sunil Kaniyur" class="initials">SXK </span> <span class="hidden fullName">Sunil Kaniyur</span> </td> <td> <span data-toggle="tooltip" data-placement="right" title="Piyoosh Kotecha" class="initials">PK </span> <span class="hidden fullName">Piyoosh Kotecha</span> </td> </tr> </tbody> </table> <hr> </div> </div> </div> <script src="//rawgithub.com/stidges/jquery-searchable/master/dist/jquery.searchable-1.0.0.min.js"></script> <script src="https://cdn.jsdelivr.net/mark.js/8.6.0/jquery.mark.min.js"></script>

td, th { text-align: center; } mark{ background: orange; color: black; padding: 0; }

//--> jquery-searchable setup $(function () { $( '#roster-table' ).searchable({ striped : true, oddRow : { 'background-color': '#f5f5f5' }, evenRow : { 'background-color': '#fff' } }); }); //--> show\hide full names $(document).ready(function(){ $('#hideNames').hide(); $('#showNames').click(function(){ $('#showNames').hide(); $('#hideNames').show(); $('.fullName').removeClass('hidden'); $('.initials').addClass('hidden'); }); $('#hideNames').click(function(){ $('#hideNames').hide(); $('#showNames').show(); $('.fullName').addClass('hidden'); $('.initials').removeClass('hidden'); }); $('[data-toggle="tooltip"]').tooltip(); }); //--> mark.js setup $(function() { var mark = function() { var keyword = $("input[name='search']").val(); var options = {}; $("input[name='opt[]']").each(function() { options[$(this).val()] = $(this).is(":checked"); }); $(".context").unmark({ done: function() { $(".context").mark(keyword, options); } }); }; $("input[name='search']").on("input", mark); //$("input[type='checkbox']").on("change", mark); });