how to hide unchecked row in table

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • namita
    New Member
    • Apr 2013
    • 9

    how to hide unchecked row in table

    how can we hide unchecked row in table

    i hv a table with about 30 rows which have a checkbox and a bit of text each. What i am attempting to get a approach to do is to have 2 buttons at the bottom of the page - HIDE & SHOW. When the HIDE button is clicked i wana to hide all of the table rows which have UNCHECKED textboxes. When the SHOW button is clicked i wish to restore the visibility of all of the rows. i wana to do this in JavaScript (which is what i am getting problem with) - i have been capable to get bits of it to work at number of times but i am executing out of time and I actually i wana help. Any idea somebody has would be more than appreciated!

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <title>View records in MySQL</title> 
    
    </head> 
    
    <body> 
    
    <?php 
    //connect to the database 
    $connect = mysql_connect("localhost","root",""); 
    mysql_select_db("login",$connect); //select the table
    $query = mysql_query( "SELECT * FROM employee ")or die(mysql_error());
    $show=$_POST['show'];
    
    
    	
    	
    $timezone = "Asia/Calcutta";
    if(function_exists('date_default_timezone_set')) date_default_timezone_set($timezone);
    
    	
    	echo"<center><h2>";
              echo "Cover id generate at :".date('d-m-Y g:i a');
    		  
    		  echo "</h2></center>";
    		  // generate cover id using random number
    	$rand= rand();
    	echo"<center><h2>";
              echo "Cover Id :".$rand;
    		  echo "</h2></center>";
    		
    
    
    	
    
    
    
    echo'
    <form action="'.$_SERVER['PHP_SELF'].'" method="post">
    <table width="100%" cellpadding="4" border="1">
    <tr>
    <td> id  </td>
    <td> reg_no  </td>
    <td> reg_time  </td>
    <td>name   </td>
    <td> email_id  </td>
    <td> valid_from  </td>
    <td> valid_to  </td>
    <td> pan_no  </td>
    <td>  policy </td>
    <td> org_name  </td>
    <td> reseller_id  </td>
    <td> reseller_name </td>
    <td>mark</td>
    </tr>';
    
    while($row = mysql_fetch_assoc($query))
    {
    	echo'
    <tr>
    <td>'.$row['id'].'</td>
    <td>'.$row['reg_no'].'</td>
    <td>' .$row['reg_time'].'</td>
    <td>'.$row['name'].'</td>
    <td>'.$row['email_id'].'</td>
    <td>'.$row['valid_from'].'</td>
    <td>' .$row['valid_to'] .'</td>
    <td>'.$row['pan_no'].'</td>
    <td>' .$row['policy'].'</td>
    <td> '.$row['org_name'].'</td>
    <td>'.$row['reseller_id'].'</td>
    <td>' .$row['reseller_name'].'</td>
    <td><input type="checkbox" name="id[]" value="'.$row['id'].'"></td>
    
    </tr>';	
    }
    mysql_free_result($query);
    echo '
    </table>
    <br>
    <div align="center">
    
    <input type="submit" name="show"  value="show"  >
    <input type="reset" name="cancel"  value="Cancel mark">
    </div>
    </form>';
    
    ?> 
    
    
    </body> 
    </html>
    Last edited by acoder; May 2 '13, 10:42 AM. Reason: Merged posts
  • Rabbit
    Recognized Expert MVP
    • Jan 2007
    • 12517

    #2
    I don't see any javascript. It would help to see your javascript along with any error messages you're getting. It would also help to see the HTML source from the client side. We don't need the PHP stuff getting in the way.

    Comment

    • Sherin
      New Member
      • Jan 2020
      • 77

      #3
      Try This Code

      Code:
      $("button").click(function(){
          $("table tr").has(".check-box:not(:checked)").hide();
      });
      table, tr, td {
          border: 1px solid black;
      }
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <table>
          <tr>
              <th>Name</th>
              <th>InUse</th>
          </tr>
          <tr>
              <td>foo 1</td>
              <td>
                  <input class="check-box" type="checkbox" checked disabled  />
              </td>
          </tr>
          <tr>
              <td>foo 2</td>                  
              <td>
                  <input class="check-box" type="checkbox" disabled  />
              </td>
          </tr>
          <tr>
              <td>foo 3</td>                  
              <td>
                  <input class="check-box" type="checkbox" checked disabled  />
              </td>
          </tr>
          <tr>
              <td>foo 4</td>                  
              <td>
                  <input class="check-box" type="checkbox" disabled  />
              </td>
          </tr>
      </table>
      <button>Only checked</button>

      Comment

      Working...