1

Tenho uma tabela em HTML para gerenciamento de chamados

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

Aqui esta o exemplo, eu tenho 3 botoes

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

Queria saber como fazer para que quando eu clique por exemplo no botão "Aberto" ele me traga na tabela, somente os registros onde a coluna "Situação" estiver preenchida com a palavra "Aberto", e assim sucessivamente, como eu faria isso?

1 Resposta 1

1

O melhor seria dar uma data-estado a cada coluna. Depois usas o mesmo valor que o data-estado no id do botão.

Exemplo:

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>

6
  • Obrigado amigo, funcionou mas eu tenho outra duvida, depois, em uma situação real, esses dados viriam a partir do Banco de dados, por padrão, o data-estado viria como "Aberto", depois quando o tecnico adotasse o chamado, algum outro script poderia alterar esse data-estado para "Em Andamento" e para "Finalizado" quando terminado?
    – Kahzinhuh
    Commented 13/10/2017 às 11:53
  • @Kahzinhuh esse estado vai ser mudado antes da página carregar outra vez? ou seja vai sendo mudado enquanto a página está aberta?
    – Sergio
    Commented 13/10/2017 às 11:54
  • Muda enquanto a pagina está aberta, por exemplo, quando eu clicar em "Atender Chamado", ele mudaria automaticamente para "Em Andamento"
    – Kahzinhuh
    Commented 13/10/2017 às 12:02
  • O mesmo quando eu for finalizar o chamado
    – Kahzinhuh
    Commented 13/10/2017 às 12:05
  • 1
    Obrigado, acho que com sua ajuda eu ja consigo encontrar o caminho pra estudar o que preciso.
    – Kahzinhuh
    Commented 13/10/2017 às 12:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .