css 如何隐藏表中的所有其他行

kpbwa7wx 于 2023-02-26 发布在其他

关注(0)|答案(2)|浏览(128)

我有一个包含3列（包括国家）的表。我有3个按钮，每个按钮代表一个国家。当我单击某个按钮（例如“Brazil”）时，它会突出显示包含巴西的所有行。但是，我希望它隐藏不包含巴西的所有其他行。当我单击任何其他国家时也是如此。

<table id="table">
            <tr>
                <th>league</th>
                <th>level</th>
                <th>country</th>
            </tr>
        </table>

$(document).ready(function() {
          $("#Brazil").click(function() {
            $("table tr td:nth-child(3):contains('Brazil')").parent().addClass("brazil");
          });

<style>
      
      .brazil {
        background-color: yellow;
        }
      .argentina {
        background-color: red;
      }
      .bolivia {
        background-color: blue;
      }
      .peru {
        background-color: green;
      }
etc.

</style>

css

来源：https://stackoverflow.com/questions/75495897/how-to-hide-all-other-rows-in-a-table

2条答案

按热度按时间

6uxekuva1#

您可以使用jQuery :not(:contains())隐藏其余行。
此外，如果使用data-attributes切换类名，我们可以定义一个适用于所有国家的onClick函数。
当用户选择一个按钮时，我们将data-attribute存储在一个变量中，然后使用该变量检查td是否包含文本，如果包含，我们将类名添加到元素中。
然后，我们向剩余的元素添加另一个类名，这将隐藏所有其他元素。

$(document).ready(function() {
  $(".filter-btn").click(function() {
    let $country = $(this).data('country');
    $("table tr td:nth-child(3):contains('" + $country + "')").parent().removeClass().addClass($country.toLowerCase());
    $("table tr td:nth-child(3):not(:contains(" + $country + "))").parent().addClass('v-hide');
  });
});

.brazil {
  background-color: yellow;
}

.argentina {
  background-color: red;
}

.bolivia {
  background-color: blue;
}

.peru {
  background-color: green;
}

.v-hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="filter-btn" data-country="Brazil">
  Brazil
</button>

<button class="filter-btn" data-country="Peru">
  Peru
</button>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Brazil</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Argentina</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Bolivia</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>Peru</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Brazil</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Argentina</td>
  </tr>
</table>

赞(0）回复(0）举报 2023-02-26

mi7gmzs62#

function showRows(country) {
        var table = document.getElementById('my-table');
        var rows = table.getElementsByTagName('tr');
        for (var i = 1; i < rows.length; i++) {
          var cells = rows[i].getElementsByTagName('td');
          var match = false;
          for (var j = 0; j < cells.length; j++) {
            if (cells[j].textContent === country) {
              match = true;
              break;
            }
          }
          if (match) {
            rows[i].style.display = 'table-row';
          } else {
            rows[i].style.display = 'none';
          }
        }
      }

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <button onclick="showRows('Brazil')">Brazil</button>
    <button onclick="showRows('Canada')">Canada</button>
    <button onclick="showRows('USA')">USA</button>
    <table id="my-table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Country</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>30</td>
          <td>Brazil</td>
        </tr>
        <tr>
          <td>Jane</td>
          <td>25</td>
          <td>Canada</td>
        </tr>
        <tr>
          <td>Bob</td>
          <td>40</td>
          <td>USA</td>
        </tr>
        <tr>
          <td>Tom</td>
          <td>35</td>
          <td>Canada</td>
        </tr>
        <tr>
          <td>Alice</td>
          <td>45</td>
          <td>Brazil</td>
        </tr>
      </tbody>
    </table>
    </body>
    </html>

赞(0）回复(0）举报 2023-02-26

我来回答

css 如何隐藏表中的所有其他行

2条答案

相关问题

热门标签

最新问答