php - 显示/隐藏记录 PHP MySQL

Question

由于我找不到任何相关信息，所以我想我应该在这里寻求帮助。

我正在处理一个目前看起来像这样的表(PHP/MySQL):

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

我想制作一个可以显示/隐藏整列的按钮。所以假设我想隐藏“经理”，我可以按一个按钮，然后隐藏整个列。

我是编程新手，我已经尝试过不同的代码，但我无法让它工作。

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>";

我希望有人能帮助我，

我无法让图像正常工作，所以我做了一个 gyzago。

谢谢

Answer 1

您需要像下面这样清理您的 Php 代码:-

<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>

然后在其下添加Jquery代码:-

<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>

示例工作代码:-

$(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>