显示/隐藏记录_大数据知识库

既然我找不到任何线索，我想我应该在这里寻求帮助。
我正在处理一个表（php/mysql），它现在看起来像这样：
https://i.gyazo.com/4115cf6fb14921ea9109580ec9c6c531.png
我想做一个按钮，我可以显示/隐藏整个列。假设我想隐藏“manager”，我可以按下一个按钮，整个列都隐藏了。
我是编程新手，我已经尝试过不同的代码，但我不能让它工作。

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

你需要像这样清理你的php代码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>

然后在下面添加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>

样品加工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>

展开查看全部

显示/隐藏记录

1条答案

相关问题

热门标签

最新问答