[英]JQuery: Table Row Show/Hide based on Column Value
I have a table that has a column with Yes/No as possible values 我有一个表,其中包含可能值为Yes / No的列
<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并相应地显示/隐藏?
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>
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. 或者,您可以在创建表时根据值添加不同的类/样式。
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();
Edited again 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". 为了使其更精确,使用正则表达式来搜索“否”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.