Filter an html table with a button

Question

I have an HTML table for call management

<table class="table">
    <thead>
        <tr>
            <th>Protocolo</th>
            <th>Problema</th>
            <th>Situação</th>
            <th>Usuario</th>
            <th>Atendente</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <td>#1</td>
        <td>Internet</td>
        <td>Encerrado</td>
        <td>Alexandre</td>
        <td>Carlos</td>
        </tr>
        <tr>
        <td>#2</td>
        <td>Monitor</td>
        <td>Aberto</td>
        <td>Renato</td>
        <td>#</td>
        </tr>
        <tr>
        <td>#3</td>
        <td>Formatação</td>
        <td>Em andamento</td>
        <td>Alexandre</td>
        <td>José</td>
        </tr>
    </tbody>
</table>

Here is the example, I have 3 buttons

<div class="btn-group">
  <button type="button" id="Abertos" class="btn btn-success btn-xs">Abertos</button>
  <button type="button" id="Andamento" class="btn btn-warning btn-xs">Andamento</button>
  <button type="button" id="Encerrados" class="btn btn-danger btn-xs">Encerrados</button>
</div>

I wanted to know how to do so that when I click for example on the "Open" button it brings me in the table, only the records where the "Situation" column is filled with the word "Open", and so on, how I would do it?

Answer 1

It would be better to give a data-estado each column. Then use the same value as the data-estado in the button id.

Example:

var tds = document.querySelectorAll('table td[data-estado]');
document.querySelector('.btn-group').addEventListener('click', function(e) {
  var estado = e.target.id;
  for (var i = 0; i < tds.length; i++) {
    var tr = tds[i].closest('tr');
    tr.style.display = estado == tds[i].dataset.estado || !estado ? '' : 'none';
  }
});

.btn-group {
padding: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
rel="stylesheet"/>

<div class="btn-group">
  <button type="button" id="aberto" class="btn btn-success btn-xs">Abertos</button>
  <button type="button" id="em_andamento" class="btn btn-warning btn-xs">Andamento</button>
  <button type="button" id="encerrado" class="btn btn-danger btn-xs">Encerrados</button>
  <button type="button" class="btn btn-xs">Todos</button>
</div>

<table class="table">
  <thead>
    <tr>
      <th>Protocolo</th>
      <th>Problema</th>
      <th>Situação</th>
      <th>Usuario</th>
      <th>Atendente</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>#1</td>
      <td>Internet</td>
      <td data-estado="encerrado">Encerrado</td>
      <td>Alexandre</td>
      <td>Carlos</td>
    </tr>
    <tr>
      <td>#2</td>
      <td>Monitor</td>
      <td data-estado="aberto">Aberto</td>
      <td>Renato</td>
      <td>#</td>
    </tr>
    <tr>
      <td>#3</td>
      <td>Formatação</td>
      <td data-estado="em_andamento"></td>
      <td>Alexandre</td>
      <td>José</td>
    </tr>
  </tbody>
</table>