Demo by jquery-az.com
jQuery, CSS and HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootmenu/bootstrap-theme.min.css"> <style> body { margin: 15px; } div.search span { display: block; } div.search input[type="text"] { margin-top: 4px; } div.panel { margin-bottom: 15px; } div.panel .panel-body p:last-child { margin-bottom: 0; } span.markYellow { background: yellow; color: black; } span.markBlue { background: blue; color: white; } </style> </head> <body> <h2>A demo of table highlighting</h2> <div class="panel panel-default"> <div class="panel-heading">Search</div> <div class="panel-body"> <div class="search row"> <div class="col-xs-6"> <span>Enter Product Name:</span> <input type="text" name="item" class="form-control input-sm" placeholder="Wheat.."> </div> <div class="col-xs-6"> <span>Enter Quality:</span> <input type="text" name="seller" class="form-control input-sm" placeholder="Fine..."> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-body context"> <table class="table table-striped"> <thead> <tr> <th>Products</th> <th>Quantity</th> <th>Quality</th> </tr> </thead> <tbody> <tr> <td>Wheat</td> <td>300 Bags</td> <td>Excellent</td> </tr> <tr> <td>Rice</td> <td>1400 Bags</td> <td>Fine</td> </tr> <tr> <td>Sugar</td> <td>1100 Bags</td> <td>Prime</td> </tr> </tbody> </table> </div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <script src="js/jquery-mark/jquery.mark.min.js"></script> <script> $(function() { $("input[name='item']").on("keyup", function() { var keyword = $(this).val(), options = { "element": "span", "className": "markBlue", "separateWordSearch": true }, $ctx = $(".context table tr td:nth-child(1)"); $ctx.unmark({ done: function() { $ctx.mark(keyword, options); } }); }); $("input[name='seller']").on("keyup", function() { var keyword = $(this).val(), options = { "element": "span", "className": "markYellow", "separateWordSearch": true }, $ctx = $(".context table tr td:nth-child(3)"); $ctx.unmark({ done: function() { $ctx.mark(keyword, options); } }); }); }); </script> </body> </html>
A demo of table highlighting
Search
Enter Product Name:
Enter Quality:
Products
Quantity
Quality
Wheat
300 Bags
Excellent
Rice
1400 Bags
Fine
Sugar
1100 Bags
Prime