Início / coding / Perguntas / 79022855
Accepted
Razvan Zamfir
Asked: 2024-09-25 20:18:28 +0800 CST

Como selecionar linhas de tabela que sejam simultaneamente pares e exibidas?

  • 772

Tenho uma tabela HTML com linhas ímpares coloridas em cinza.

Algumas linhas estão ocultas <tr style="display: none">e isso cria a possibilidade de duas linhas exibidas consecutivamente serem da mesma cor, como visto no recorte abaixo:

.table thead th{
   background: #f6f6f6;
}

.table>tbody>tr:nth-of-type(even)>td {
  background: #f6f6f6;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>


<table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr style="display: none">
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

Isso significa que preciso de uma maneira de selecionar todas as linhas que são ímpares e não têm style="display: none".

Como posso alcançar esse resultado?

html

2 respostas

  1. Best Answer

    Usando a nova :nth-child(An + B of S)sintaxe. No seu caso

    tr:nth-child(even of :not([style*="none"]))

    Demonstração:

    .table thead th{
   background: #f6f6f6;
}

.table > tbody > tr:nth-child(even of :not([style*="none"])) > td {
  background: #f6f6f6;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>


<table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr style="display: none">
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr style="display: none">
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

    • 3

  2. Isso é impossível somente com CSS. CSS trabalha com a estrutura DOM e não com os elementos exibidos. Então você precisará de JS para escrever essa lógica.

    Você pode fazer um loop em cada elemento e monitorar as linhas visíveis.

    document.addEventListener('DOMContentLoaded', function() {
  const rows = document.querySelectorAll('#myTable tbody tr');
  let visibleRowCount = 0;

  rows.forEach(row => {
    // Check if the row is visible (not hidden)
    if (row.style.display !== 'none') {
      if (visibleRowCount % 2 === 1) {
        row.style.backgroundColor = 'red'; // Used red background for visibility
      } else {
        row.style.backgroundColor = ''; // Default for even visible rows (or you can set a different color)
      }
      visibleRowCount++;
    }
  });
});
    <table class="table" id="myTable">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr style="display: none">
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Tom</td>
        <td>Hanks</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

    • 0

relate perguntas