JQuery:表行显示/隐藏基于列值
我有一个表,其中包含可能值为Yes / No的列
Col1 Col2 ActiveYN Apple 12345 Yes Orange 67890 No Mango 456745 Yes
我需要显示行,如果ActiveYN是’是’并且隐藏id ActiveYN是’否’我如何访问JQuery中的ActiveYN并相应地显示/隐藏?
DEMO
$('button').on('click', function () { var $rowsNo = $('#mytable tbody tr').filter(function () { return $.trim($(this).find('td').eq(2).text()) === "No" }).toggle(); });
这样的事情怎么样: $('td:contains("No")').parent().hide();
现场演示
JS
$('input').click(function(){ $('td:contains("No")').parent().toggle(); });
HTML
Col1 Col2 ActiveYN Apple 12345 Yes Orange 67890 No Mango 456745 No
通常我会将其添加为行的属性:
....
然后隐藏它们你可以做的一切:
$(function(){ $("[data-active=No]").hide(); });
或者,您可以在创建表时根据值添加不同的类/样式。
您可以从服务器端本身执行此操作。
@if (item.ActiveYN) { }
我不知道剃刀语法,但你明白了。
为了能够从客户端执行,请添加一个类。
@if (item.ActiveYN) { } else { }
然后在jQuery中:
$('.hideMe').hide();
编辑完问题后再次编辑,现在如果我们完全忘记了服务器端:
$("mytable").find("tr:contains('No')").hide();
在按钮单击处理函数中使用此语句。 但是,请记住它还会在任何地方找到任何包含“否”的文本。 为了使其更精确,使用正则表达式来搜索“否”。