Показать / Скрыть записи PHP MySQL - PullRequest
Новая
       31

Показать / Скрыть записи PHP MySQL

0 голосов
/ 16 октября 2018

Поскольку я ничего не могу найти по этому поводу, я подумал, что мне следует попросить о помощи здесь.

Я работаю над таблицей (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>";

Я надеюсь, что кто-то может мне помочь,

Я не мог заставить изображение работать, поэтому я сделал гизаго.

Спасибо

1 Ответ

0 голосов
/ 16 октября 2018

Вам нужно очистить ваш код 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>
...