JQuery：基于列值的表行显示/隐藏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17722205/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery: Table Row Show/Hide based on Column Value
提问by Srinivas
I have a table that has a column with Yes/No as possible values
我有一个表，其中有一列以是/否作为可能的值
<table id="mytable">
<thead>
<tr>
<th>
Col1
</th>
<th>
Col2
</th>
<th>
ActiveYN
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Apple
</td>
<td>
12345
</td>
<td>
Yes
</td>
</tr>
<tr>
<td>
Orange
</td>
<td>
67890
</td>
<td>
No
</td>
</tr>
<tr>
<td>
Mango
</td>
<td>
456745
</td>
<td>
Yes
</td>
</tr>
I need to show the row if ActiveYN is 'Yes' and Hide id ActiveYN is 'No' How can i access the ActiveYN inside JQuery and show/hide accordingly?
如果 ActiveYN 为“是”并且隐藏 ID ActiveYN 为“否”，我需要显示该行 如何访问 JQuery 中的 ActiveYN 并相应地显示/隐藏？
回答by A. Wolff
回答by Brandon Boone
How about something like this: $('td:contains("No")').parent().hide();
这样的事情怎么样： $('td:contains("No")').parent().hide();
JS
JS
$('input').click(function(){
$('td:contains("No")').parent().toggle();
});
HTML
HTML
<input type='button' value='hide/show' />
<table id="mytable">
<thead>
<tr>
<th>
Col1
</th>
<th>
Col2
</th>
<th>
ActiveYN
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Apple
</td>
<td>
12345
</td>
<td>
Yes
</td>
</tr>
<tr>
<td>
Orange
</td>
<td>
67890
</td>
<td>
No
</td>
</tr>
<tr>
<td>
Mango
</td>
<td>
456745
</td>
<td>
No
</td>
</tr>
回答by dz15
usually I would add this as an attribute on the row:
通常我会将它添加为行上的一个属性：
<tr data-active="No">
....
</tr>
Then to hide them all you can do:
然后隐藏它们你可以做的一切：
$(function(){
$("[data-active=No]").hide();
});
Or you can add different classes/styles based on the value when it creates the table.
或者您可以在创建表时根据值添加不同的类/样式。
回答by Abhitalks
You can do it from server side itself.
您可以从服务器端本身完成。
@if (item.ActiveYN) {
<tr style="display: none;">
} else {
<tr>
}
I don't know the razor syntax, but you get the idea.
我不知道剃刀语法，但你明白了。
To be able to do it from client-side, add a class.
为了能够从客户端执行此操作，请添加一个类。
@if (item.ActiveYN) {
<tr class="hideMe">
} else {
<tr>
}
And then in jQuery:
然后在 jQuery 中：
$('.hideMe').hide();
Editedagain after your question was edited, now if we forget the server-side altogether:
编辑您的问题后再次编辑，现在如果我们完全忘记服务器端：
$("mytable").find("tr:contains('No')").hide();
Use this statement in your button click handler function. But, remember it will also find any text which contains "No" anywhere in a row. To make it more precise, use regular expressions to search exactly a "No".
在您的按钮单击处理函数中使用此语句。但是，请记住，它还会在一行中的任何位置找到包含“否”的任何文本。为了使其更精确，请使用正则表达式精确搜索“否”。
