jQuery：基于列数据隐藏表中的行
[英]jQuery : hide rows in table based on column data
问题描述
I have a simple HTML Table and it has a HTML button underneath it as shown below. 
我有一个简单的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>
Is it possible to do hide all rows that belong to Company A when I click on that button ? 当我单击该按钮时，是否可以隐藏属于公司A的所有行？
I know I can hide elements using $(selector).hide() but I am not sure how I can select/hide only certain rows based on some value ? 我知道我可以使用$(selector).hide()隐藏元素，但是我不确定如何只能基于某些值选择/隐藏某些行？
3 个解决方案
解决方案1
1 2018-03-01 22:43:01
add a class to each row with a company identifier: 向每行添加一个带有公司标识符的类：
<tr class="company-a">
<td>A</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
Then in your jQuery you can go something like: 然后在您的jQuery中，您可以执行以下操作：
$('.company-a').hide()
I have added a fiddle to show how this could work: https://jsfiddle.net/qmrkdesf/6/ 我添加了一个小提琴以显示其工作方式： https : //jsfiddle.net/qmrkdesf/6/
解决方案2
1 2018-03-01 22:43:08
You can do the following: 您可以执行以下操作：
(Note that selecting elements by their tag names is bad practice. You should add some data attributes instead, and then use $('[data-my-table]') and such.) （请注意，通过标签名称选择元素是一种不好的做法。您应该改为添加一些数据属性，然后使用$('[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>
解决方案3
1 已采纳 2018-03-01 22:43:52
Based only on the provided sample html. 仅基于提供的示例html。 Within your click handler, using the correct selector to find the first td of each tr and then looping over each to perform decision logic would work: 在您的点击处理程序中，使用正确的选择器来找到每个tr的第一个td，然后遍历每个tr来执行决策逻辑将起作用：
$("tr td:first-child").each(function(index){
if($(this).text() === "A") {
$(this).closest("tr").hide();
}
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.