Question

我有一个简单的HTML表格，下面有一个HTML按钮，如下所示。

＆＃13;

<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>A</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>C</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>C</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

<button type="button">Hide A</button>

＆＃13;

当我点击该按钮时，是否可以隐藏属于公司A的所有行？

我知道我可以使用$(selector).hide()隐藏元素，但我不确定如何根据某些值选择/隐藏某些行？

Answer 1

使用公司标识符为每一行添加一个类：

 <tr class="company-a">
    <td>A</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>

然后在你的jQuery中你可以这样：

$('.company-a').hide()

我添加了一个小提琴来展示它是如何工作的：https://jsfiddle.net/qmrkdesf/6/

Answer 2

您可以执行以下操作：

（请注意，按标签名称选择元素是不好的做法。您应该添加一些数据属性，然后使用$('[data-my-table]')等。）

＆＃13;

$(function() {
  $('button').on('click', () => {
    $('table td:first-child')
      .filter((_, cell) => $(cell).text() === 'A')
      .closest('tr')
      .hide();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>A</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>C</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>C</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

<button type="button">Hide A</button>

</body>
</html>

＆＃13;

Answer 3

仅基于提供的示例html。在你的点击处理程序中，使用正确的选择器来查找每个tr的第一个td然后循环遍历每个tr以执行决策逻辑将起作用：

$("tr td:first-child").each(function(index){
    if($(this).text() === "A") {
        $(this).closest("tr").hide();
    }
});

jQuery：根据列数据

3 个答案: