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

Question

我有一张表，其中一列的可能值为是/否。

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

如果ActiveYN是“是”，则需要显示该行，如果ActiveYN是“否”，则需要隐藏该行。如何在JQuery中访问ActiveYN并相应地显示/隐藏？

- Srinivas

---

请提供渲染的HTML代码 - A. Wolff

最好发布HTML而不是ASP，因为jQuery是客户端的，会更改HTML而不是您的服务器端代码。 - adeneo

Answer 1

演示

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

- A. Wolff

Answer 2

这样怎么样：$('td:contains("No")').parent().hide();

现场演示

JS

$('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>

- Brandon Boone

Answer 3

通常，我会在行上添加此属性：

<tr data-active="No">
....
</tr>

然后要隐藏它们，您可以这样做：

$(function(){

$("[data-active=No]").hide();
});

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

- kevhann80

Answer 4

你可以直接在服务器端完成它。

@if (item.ActiveYN) {
    <tr style="display: none;">
} else {
    <tr>
}

我不知道剃刀语法，但是你可以理解这个概念。

如果想要从客户端执行，需要添加一个类。

@if (item.ActiveYN) {
    <tr class="hideMe">
} else {
    <tr>
}

然后在jQuery中：

$('.hideMe').hide();

在你的问题被编辑后，我进行了再次编辑。现在，如果我们完全忘记服务器端：

$("mytable").find("tr:contains('No')").hide();

在您的按钮单击处理程序函数中使用此语句。但是，请记住它还将查找任何在行中任何位置包含“No”的文本。为了使其更精确，请使用正则表达式来精确搜索“No”。

- Abhitalks

---

但这样它就是静态的，不会依赖于用户的交互。 - A. Wolff

修改了答案。现在你可以从客户端使用它。 - Abhitalks

实际上我早些时候应该发布纯HTML，现在已经发布了。我会放置一个按钮来隐藏或显示。 - Srinivas

@Seenu，您已编辑了问题并删除了服务器端代码。这将改变答案的上下文，因为它是基于您的服务器端HTML生成的。 - Abhitalks

@Seenu 根据您新的问题背景，已编辑答案。 - Abhitalks