JQuery：表行显示/隐藏基于列值

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并相应地显示/隐藏?

4 个解决方案

#1

DEMO

$('button').on('click', function () {
    var $rowsNo = $('#mytable tbody tr').filter(function () {
        return $.trim($(this).find('td').eq(2).text()) === "No"
    }).toggle();
});

#2

How about something like this: $('td:contains("No")').parent().hide();

这样的事情怎么样:$('td:contains(“No”)')。parent()。hide();

Live Demo

$('input').click(function(){
    $('td:contains("No")').parent().toggle();
});

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>

#3

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.

或者,您可以在创建表时根据值添加不同的类/样式。

#4

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

在按钮单击处理函数中使用此语句。但是,请记住它还会在任何地方找到任何包含“否”的文本。为了使其更精确,使用正则表达式来搜索“否”。

#1