Filter Table Row in Html

css, html-table, javascript, jquery

Solution

include Jquery

    <head>
     <style type="text/css">
       body {padding: 20px;}
       input {margin-bottom: 5px; padding: 2px 3px; width: 209px;}
       td {padding: 4px; border: 1px #CCC solid; width: 100px;}
     </style>    
    </head>
   <body>
    <input type="text" id="search" placeholder="Type to search">
      <table id="table">
      <tr> <td>Apple</td>
           <td>Green</td>
      </tr>
      <tr> <td>Grapes</td>
           <td>Green</td>
      </tr>
      <tr> <td>Orange</td>
           <td>Orange</td>
      </tr>
   </table>
   <script src="http://code.jquery.com/jquery-2.1.0.js"></script>
   <script type="text/javascript">
     var $rows = $('#table tr');
     $('#search').keyup(function() {
         var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

         $rows.show().filter(function() {
             var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
             return !~text.indexOf(val);
         }).hide();
     });
    </script>
    </body>

Run the code,

Problem

I have created a html page which has a search text and a table below with some data on it in the table. I used the code available on JSFiddle. But it did not work. Please suggest something like the example shown. I am using a simple html, CSS and Javascript coding. In this jQuery is used: ``` var $rows = $('#table td'); $('#search').keyup(function() { var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); $rows.show().filter(function() { var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); return !~text.indexOf(val); }).hide(); }); ``` Can I have something simpler since this is a hybrid application? I am using the following code. Please check ``` <!DOCTYPE html> <html> <head> <title>Search Box Example 2 - default placeholder text gets cleared on click</title> <link rel="stylesheet" href="css/SalesTable.css"> <meta name="ROBOTS" content="NOINDEX, NOFOLLOW" /> <!-- JAVASCRIPT to clear search text when the field is clicked --> <script src="http://code.jquery.com/jquery-2.1.0.js"></script> <script type="text/javascript"> var $rows = $('#table tr'); $('#tfq').keyup(function() { var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); $rows.show().filter(function() { var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); return !~text.indexOf(val); }).hide(); }); </script> <!-- CSS styles for standard search box with placeholder text--> </head> <body> <!-- HTML for SEARCH BAR --> <div id="tfheader"> <form id="tfnewsearch" method="get" action="http://www.google.com"> <input type="text" id="tfq" class="tftextinput2" name="q" size="21" maxlength="120" placeholder="Type to search"><input type="button" value="Search" class="tfbutton2"> </form> <div class="tfclear"></div> </div> <br> <br> <div id="tableSalesOrder"> <table id="table"> <tr> <th> A </th> <th> B </th> <th> C </th> <th> D </th> </tr> <script language="javascript"> <!-- for(i =0 ;i<4 ; i++) { document.write('<tr>'); document.write('<td>12345</td>') document.write('<td>34566</td>') document.write('<td>345356</td>') document.write('<td>Tyjhue</td>') document.write('<td><form id="approveForm"><input type = "submit" value="ButtonA"></form></td>') document.write('<td><form id="rejectForm"><input type = "submit" value="ButtonB"></form></td>') document.write('<td><form id="detailForm"><input type = "submit" value="ButtonC"></form></td>') document.write('</tr>') } //--> </script> </table> </div> </body> </html> ```

Original source