jQuery：基于列数据隐藏表中的行

Question

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

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

当我单击该按钮时，是否可以隐藏属于公司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]')等。）

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

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

Answer 3

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

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

jQuery：基于列数据隐藏表中的行

问题描述

3 个解决方案

解决方案1
1 2018-03-01 22:43:01

解决方案2
1 2018-03-01 22:43:08

解决方案3
1 已采纳 2018-03-01 22:43:52

jQuery：基于列数据隐藏表中的行

问题描述

3 个解决方案

解决方案1 1 2018-03-01 22:43:01

解决方案2 1 2018-03-01 22:43:08

解决方案3 1 已采纳 2018-03-01 22:43:52

解决方案1
1 2018-03-01 22:43:01

解决方案2
1 2018-03-01 22:43:08

解决方案3
1 已采纳 2018-03-01 22:43:52