title: how to hide table row by applying filter variables using javascript?
body: <p>FYI- I am making a timesheet project using PHP and MySQL</p>
  
  <p>I am new to PHP, I tried to use PHP make HTML table rows and assign them row id, but the problem is that my table is displaying a large number of rows, so I made a javascript filter to display only rows which match with the filter values</p>
  
  <p>But the problem is I don't how to use row id and then use their values to get compared with the javascript variable and based on match its CSS property is set to display (if matched) or hide (if not matched).</p>
  
  <p>Is there any other way to do this?</p>
  
  <p>Here is Filter Section.</p>
  
  <pre><code>&lt;div class='row'&gt;
     &lt;div class='col'&gt;      
              &lt;label&gt;Select Filters:&lt;/label&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class='row'&gt;
     &lt;div class='col'&gt;
         &lt;div class='filter'&gt;
             &lt;label&gt;EmpID:&lt;/label&gt;
             &lt;select id='empid_select'&gt;
                 &lt;option value='' &gt;select&lt;/option&gt;
                 &lt;?php
  
                      include('connection.php');
                      $stmt = $conn-&gt;prepare('SELECT `EmpID`, `Name` FROM `employee_data` ORDER BY `EmpID` ');
  
                      if($stmt-&gt;execute()){
  
                          $stmt-&gt;bind_result($empid, $empname);
  
                          while($stmt-&gt;fetch()){
                              echo "&lt;option value='$empid'&gt;$empid - $empname&lt;/option&gt;";
                          }
  
                      }else{
  
                          printf("Error: %s\n", $conn-&gt;error);
  
                      }
  
                      $stmt-&gt;close();
                 ?&gt;
             &lt;/select&gt;
             &amp;nbsp;&amp;nbsp;
             &lt;label&gt;Project Code:&lt;/label&gt;
             &lt;select id='projectcode_select'&gt;
                 &lt;option value=''&gt;Select&lt;/option&gt;
                 &lt;?php
  
                      include('connection.php');
                      $stmt = $conn-&gt;prepare('SELECT `Projectcode`, `Title` FROM `Projectcodetbl` ORDER BY `Projectcode` ASC ');
  
  
                      if($stmt-&gt;execute()){
  
                          $stmt-&gt;bind_result($projectcode, $title);
  
                          while($stmt-&gt;fetch()){
                              echo "&lt;option value='$projectcode'&gt;$projectcode - $title&lt;/option&gt;";
                          }
  
                      }else{
  
                          printf("Error: %s\n", $conn-&gt;error);
  
                      }
  
  
                 ?&gt;
             &lt;/select&gt;
             &amp;nbsp;&amp;nbsp;
             &lt;label&gt;Start Date: &lt;/label&gt;
             &lt;input type='date' name='startdate-filter' id='startdate-filter' &gt;
              &amp;nbsp;&amp;nbsp;
             &lt;label&gt;End Date: &lt;/label&gt;
             &lt;input type='date' name='enddate-filter' id='enddate-filter' &gt;
             &amp;nbsp;&amp;nbsp;
             &lt;button name='notseen-entries-filter-button' id='notseen-entries-filter-button'&gt;Apply&lt;/button&gt;
  
         &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>Here is my script to get value form the filter section.</p>
  
  <pre><code>&lt;script&gt;
  
     $(document).ready(function(){
  
  
  
      $('[name="notseen-entries-filter-button"]').click(function(e){
  
          var empid = $('#empid_select option:selected').val();
          var projectcode = $('#projectcode_select option:selected').val();
          var startdate = $('#startdate-filter').val();
          var enddate = $('#enddate-filter').val();
  
          alert("Filter rows with values EmpID: "+empid+", ProjectCode: "+projectcode+", StartDate: "+startdate+", EndDate: "+enddate);   
  
  
      });
  
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>PHP Function for displaying the table heading</p>
  
  <pre><code>function displayTableHeading(){
  
      echo "
      &lt;form action='selected.php' method='post'&gt;
          &lt;table border='1' cellpadding='10' cellspacing='0'&gt;
              &lt;tr&gt;
  
                  &lt;th colspan='13'&gt;&lt;button type='submit' class='btn btn-outline-primary'  style='border-radius: 3px;'&gt;&lt;i class='fas fa-edit' style='margin-right:10px;'&gt;&lt;/i&gt;Update&lt;/button&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;Row&lt;/th&gt;
                  &lt;th&gt;EmpID - Name&lt;/th&gt;
                  &lt;th&gt;Date&lt;/th&gt;
                  &lt;th&gt;Start Time&lt;/th&gt;
                  &lt;th&gt;End Time&lt;/th&gt;
                  &lt;th&gt;Hrs&lt;/th&gt;
                  &lt;th&gt;Project Code&lt;/th&gt;
                  &lt;th&gt;Task Performed&lt;/th&gt;
  
                  &lt;th&gt;Invoice Num&lt;/th&gt;
                  &lt;th colspan=3&gt;Status&lt;/th&gt;
  
              &lt;/tr&gt;";
  
  
  }
  </code></pre>
  
  <p>PHP Function for displaying the table rows.</p>
  
  <pre><code>//Webpage Table Row
  function displayTableRow($row, $i, $empid){
  
          $notBillable = intval( $row['Status'] )==1 ? 'checked' : '';
          $billablePlusNotInvoiced = intval( $row['Status'] )==2 ? 'checked' : '';
          $billablePlusInvoiced = intval( $row['Status'] )==3 ? 'checked' : '';
  
          printf("
          &lt;!-- record: %d --&gt;
          &lt;tr id='%d'&gt;
              &lt;td&gt;&lt;input type='text' size='1' value='%d' &gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type='text' size='10' name='empid[]' value='%s'&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type='text' size='7' name='date[]' value='%s' &gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type='text' size='5' name='stime[]' value='%s' &gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type='text' size='5' name='etime[]' value='%s' &gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type='text' size='1' name='hours[]' value='%s' &gt;&lt;/td&gt;
              &lt;td&gt;&lt;b&gt;&lt;input type='text' size='9' name='projectcode[]' value='%s' &gt;&lt;/b&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type='text' size='30' name='taskperformed[]' value='%s' &gt;&lt;/td&gt;
  
              &lt;td&gt;&lt;input type='text' size='8' name='invoicenum[]' value='%s' &gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type='radio' name='status_{$i}[]' value='1' %s/&gt;NB&lt;/td&gt;
              &lt;td&gt;&lt;input type='radio' name='status_{$i}[]' value='2' %s/&gt;B+NI&lt;/td&gt;
              &lt;td&gt;&lt;input type='radio' name='status_{$i}[]' value='3' %s/&gt;B+I&lt;/td&gt;
              &lt;input type='hidden' name='modifieddate[]' value='%s'&gt;
          &lt;/tr&gt;",
          $i,$i,$i,
          getEmpNameById($empid),
          $row['Date'],
          $row['StartTime'],
          $row['EndTime'],
          $row['NoOfHours'],
          $row['ProjectCode'],
          $row['TaskPerformed'],
          $row['InvoiceNumber'],
          $notBillable,
          $billablePlusNotInvoiced,
          $billablePlusInvoiced,
          $row['ModifiedDate']
     );
  
  
  }    
  </code></pre>
  
  <p>PHP code for calling above function and displaying the HTML table.</p>
  
  <pre><code>$sumNoOfHours = 0.0;                                
  displayTableHeading(); 
  
  $i=1;  
  foreach($empid_array as $code){
  
      //split the $code variable to get the emp id 
      $codearr = explode(" - ", $code);
      $empid = $codearr[0];
  
      $selectSql = "SELECT * FROM `mastertbl` WHERE EmpID = '$empid' AND Status = 0 ORDER BY Date DESC, ModifiedDate DESC";
      $result = mysqli_query($conn, $selectSql) or die( mysqli_error($conn));                                                           
      while($row = mysqli_fetch_array($result))
      {
          $sumNoOfHours = $sumNoOfHours + $row['NoOfHours'];
          displayTableRow($row, $i, $empid);
          $i++;
  
      }
  
  }
  </code></pre>