<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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"> <div class="col-md-9"> <table class="table table-striped"> <thead> <tr> <th>購買時間</th> <th>付費時間</th> <th>類別</th> <th>金額</th> <th>點數</th> <th>狀態</th> </tr> </thead> <tbody> <tr> <td>2015-03-09 23:46:54</td> <td>2015-03-09 23:46:54</td> <td>test</td> <td>10,000</td> <td>10,000</td> <td>test</td> </tr> <tr> <td>2015-03-09 23:46:54</td> <td>2015-03-09 23:46:54</td> <td>test</td> <td>10,000</td> <td>10,000</td> <td>test</td> </tr> <tr> <td>2015-03-09 23:46:54</td> <td>2015-03-09 23:46:54</td> <td>test</td> <td>10,000</td> <td>10,000</td> <td>test</td> </tr> </tbody> </table> </div> </div> </div>

body { margin-top: 2% }

$(document).ready(function() { var activeSystemClass = $('.list-group-item.active'); //something is entered in search form $('#system-search').keyup( function() { var that = this; // affect all table rows on in systems table var tableBody = $('.table-list-search tbody'); var tableRowsClass = $('.table-list-search tbody tr'); $('.search-sf').remove(); tableRowsClass.each( function(i, val) { //Lower text for case insensitive var rowText = $(val).text().toLowerCase(); var inputText = $(that).val().toLowerCase(); if(inputText != '') { $('.search-query-sf').remove(); tableBody.prepend('<tr class="search-query-sf"><td colspan="6"><strong>Searching for: "' + $(that).val() + '"</strong></td></tr>'); } else { $('.search-query-sf').remove(); } if( rowText.indexOf( inputText ) == -1 ) { //hide rows tableRowsClass.eq(i).hide(); } else { $('.search-sf').remove(); tableRowsClass.eq(i).show(); } }); //all tr elements are hidden if(tableRowsClass.children(':visible').length == 0) { tableBody.append('<tr class="search-sf"><td class="text-muted" colspan="6">No entries found.</td></tr>'); } }); });