I have a table with 3 rows. | id | fullname | email.
In the php code, I have programmed that when someone registers on my site, it can be in active (y) or pending (t) status.

What I want is to have a button called PENDING and when I press it, it will show only the users who are Pending in blue. Now as it is, the pending users is blue without pressing the button. Any idea; Thank you in advance..

<!-- Table -->
<?php if($this->data):?>
<table>
    <thead>
      <tr>
        <th>UID</th>
        <th>FULLNAME</th>
        <th>EMAIL ADDRESS</th>
      </tr>
    </thead>

<?php
$name = 'ON';

echo '<button type="button" id="buttons" 
onclick="myFunction(\'' . $name . '\')">Pending</button>';
?>
    
<script>
function myFunction(name) {
    $('#buttons').toggleClass('active'); 
    $('tr').toggleClass('active');
}
</script> 
<style>
.active {
    background: purple !important;
}
</style>



<?php foreach ($this->data as $row):?>

<?php if($row->active == t):?>
    <?php 
    $blueColor = 'blue';
    $greenColor = '#304030';?>
    <tr style="background-color:<?php echo $blueColor ;?>">
    <?php else:?>
<?php if($row->active == y):?>
    <tr style="background-color:<?php echo $greenColor ;?>">
    <?php endif;?>
    <?php endif;?>
    
    
<td><?php echo $row->id;?></td>
<td><?php echo $row->fullname;?></td>
<td><?php echo $row->email;?></td>
</tr>


<?php endforeach;?>
</table>
<?php endif;?>
</div>


    
    

CodePudding user response：

You should try to use addEventListener:

const btn = document.getElementById('buttons');

btn.addEventListener("click", function() {
// what's to happen after click
});

CodePudding user response：

It is not completely clear if the code shown above is how your code is currently or whether it is comprised of portions of your actual code. As it is above that would be invalid markup due to the inclusion of the button, script and style elements in the table. However he following is based upon an understanding (perhaps incorrect) of what you are trying to do

const delay = 100; //ms - controls the time between hiding/showing table rows

// helper to change the buttons displayed text when it is clicked
const togglevalue = (n) => {
  n.dataset.tmp = n.textContent;
  n.textContent = n.dataset.alt;
  n.dataset.alt = n.dataset.tmp;
  n.removeAttribute('data-tmp');
};



// find in-active users and hide them initially
let col=document.querySelectorAll('tr[data-state="t"]');
    col.forEach(tr=>{
      tr.style.display='none';
    });




// bind an event listener to the button rather than using an inline `onclick`
document.querySelector('button[name="pending"]').addEventListener('click', e => {

  // toggle the data attribute between 1 and 0
  e.target.dataset.state = 1 - e.target.dataset.state;
  
  // change the displayed text of the button
  togglevalue(e.target);
  
  // for each table row, either show or hide depending on button click
  col.forEach((tr, i) => {
    setTimeout(() => {
      tr.style.display = e.target.dataset.state == 1 ? 'none' : 'table-row';
    }, delay * i);
  });
});

table{
  width:60%;
}
td {
  padding: 0.5rem;
  font-family: monospace;
}

[data-state='t'] {
  background-color: lightblue
}

[data-state='y'] {
  background-color: #304030;
  color: white;
}

button {
  padding: 1rem;
  margin: 1rem auto;
}

<button type="button" name='pending' data-state=1 data-alt='Hide'>Pending</button>
<!--
  Example rendered HTML. 
  
  Inline styles removed!
  Data-attributes added.
  
  The "data-state" added by PHP when
  the table is rendered - taking the value from the db
-->
<table>
  <colgroup>
    <col width='10%' />
    <col width='30%' />
    <col width='60%' />
  </colgroup>
  <thead>
    <tr>
      <th>UID</th>
      <th>FULLNAME</th>
      <th>EMAIL ADDRESS</th>
    </tr>
  </thead>
  <tbody>
    <tr data-state='t'>
      <td>21</td>
      <td>joe bloggs</td>
      <td>[email protected]</td>
    </tr>
    <tr data-state='y'>
      <td>91</td>
      <td>john doe</td>
      <td>[email protected]</td>
    </tr>
    <tr data-state='t'>
      <td>59</td>
      <td>fred smith</td>
      <td>[email protected]</td>
    </tr>
    <tr data-state='t'>
      <td>321</td>
      <td>tasha yar</td>
      <td>[email protected]</td>
    </tr>
    <tr data-state='y'>
      <td>68</td>
      <td>carol marcus</td>
      <td>[email protected]</td>
    </tr>
    <tr data-state='y'>
      <td>36</td>
      <td>aayla secura</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>