Search code examples
phpmysqlbuttonhideshow

Show/Hide records PHP MySQL

Since i can't find anything about this, i thought i should ask for help here.

I'm working on a table (PHP/MySQL) which currently looks like this:

https://i.gyazo.com/4115cf6fb14921ea9109580ec9c6c531.png

I want to make a button where i can show / hide a whole column. so let's say i would like to hide 'Manager', i could press a button and the whole column hides.

I'm new to programming, i already tried different codes but i can't get it to work.

if($result = mysqli_query($link, $sql)){
    if(mysqli_num_rows($result) > 0){
        echo "<table class='table table-bordered table-striped'>";
        echo "<thead>";
        echo "<tr>";
     ?>
        <th class="rotate2"><div><span>Naam</span></div></th>
        <th class="rotate2"><div><span>Functie</span></div></th>
        <th class="rotate2"><div><span>Afdeling</span></div></th>
        <th class="rotate2"><div><span>Contract</span></div></th>                      
        <th class="rotate2"><div><span>DID</span></div></th>
        <th class="rotate2"><div><span>DUD</span></div></th>
        <th class="rotate2"><div><span>Manager</span></div></th>
        <th class="rotate2"><div><span>Profiel</span></div></th>
 <?php 
   while($row = mysqli_fetch_array($result)){
        echo "<tr>";
        echo "<td>" . $row['naam'] . "</td>";
        echo "<td>" . $row['functie'] . "</td>";
        echo "<td>" . $row['afdeling'] . "</td>";
        echo "<td>" . $row['contract'] . "</td>";
        echo "<td>" . $row['DID'] . "</td>";
        echo "<td>" . $row['DUD'] . "</td>";
        echo "<td>" . $row['manager'] . "</td>";
        echo "<td>" . $row['profiel'] . "</td>";

I hope someone could help me,

I couldn't get the image to work, so i made a gyzago.

Thanks

Solution

  • You need to clean you Php code like below:-

    <table class='table table-bordered table-striped'>
    <thead>
        <tr>
            <th class="rotate2"><div><span>Naam</span></div></th>
            <th class="rotate2"><div><span>Functie</span></div></th>
            <th class="rotate2"><div><span>Afdeling</span></div></th>
            <th class="rotate2"><div><span>Contract</span></div></th>                      
            <th class="rotate2"><div><span>DID</span></div></th>
            <th class="rotate2"><div><span>DUD</span></div></th>
            <th class="rotate2"><div><span>Manager</span><br><button class="show">Show</button><button class="hide">Hide</button></div></th>
            <th class="rotate2"><div><span>Profiel</span></div></th>
            <th class="rotate2"><div><span>Action</span></div></th>
        </tr>
    </thead>
    <tbody>
        <?php 
            if($result = mysqli_query($link, $sql)){
                if(mysqli_num_rows($result) > 0){
                    while($row = mysqli_fetch_array($result)){
                        echo "<tr>";
                        echo "<td>" . $row['naam'] . "</td>";
                        echo "<td>" . $row['functie'] . "</td>";
                        echo "<td>" . $row['afdeling'] . "</td>";
                        echo "<td>" . $row['contract'] . "</td>";
                        echo "<td>" . $row['DID'] . "</td>";
                        echo "<td>" . $row['DUD'] . "</td>";
                        echo "<td>" . $row['manager'] . "</td>";
                        echo "<td>" . $row['profiel'] . "</td>";
                        echo "</tr>";
                    }
                }
            }
        ?>
    </tbody>
</table>

    And then add Jquery code under it:-

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('.show').hide();
  $('.hide').on('click',function(){
    $('tr').find('td:eq('+$(this).closest('th').index()+')').css('visibility','hidden');
    $(this).closest('th').find('.show').show();
    $(this).hide();
  });
  $('.show').on('click',function(){
   $('tr').find('td:eq('+$(this).closest('th').index()+')').css('visibility','visible');
    $(this).closest('th').find('.hide').show();
    $(this).hide();
  });
});
</script>

    Sample working code:-

    $(document).ready(function(){
  $('.show').hide();
  $('.hide').on('click',function(){
    $('tr').find('td:eq('+$(this).closest('th').index()+')').css('visibility','hidden');
    $(this).closest('th').find('.show').show();
    $(this).hide();
  });
  $('.show').on('click',function(){
   $('tr').find('td:eq('+$(this).closest('th').index()+')').css('visibility','visible');
    $(this).closest('th').find('.hide').show();
    $(this).hide();
  });
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class='table table-bordered table-striped'>
  <thead>
    <tr>
      <th class="rotate2"><div><span>Naam</span></div></th>
      <th class="rotate2"><div><span>Functie</span></div></th>
      <th class="rotate2"><div><span>Afdeling</span></div></th>
      <th class="rotate2"><div><span>Contract</span></div></th>
      <th class="rotate2"><div><span>DID</span></div></th>
      <th class="rotate2"><div><span>DUD</span></div></th>
      <th class="rotate2"><div><span>Manager</span><br><button class="show">Show</button><button class="hide">Hide</button></div></th>
      <th class="rotate2"><div><span>Profiel</span></div></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
      <td>A1</td>
      <td>A2</td>
      <td>A3</td>
      <td>A4</td>
      <td>A5</td>
      <td>A6</td>
      <td>A7</td>
    </tr>
    <tr>
      <td>B</td>
      <td>B1</td>
      <td>B2</td>
      <td>B3</td>
      <td>B4</td>
      <td>B5</td>
      <td>B6</td>
      <td>B7</td>
    </tr>
    <tr>
      <td>C</td>
      <td>C1</td>
      <td>C2</td>
      <td>C3</td>
      <td>C4</td>
      <td>C5</td>
      <td>C6</td>
      <td>C7</td>
    </tr>
  </tbody>
</table>