Question

我有一个表，其中包含可能值为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>

如果ActiveYN为'是'，则需要显示该行，并且隐藏ID为ActiveN是否为'否' 如何在JQuery中访问ActiveYN并相应地显示/隐藏？

Answer 1

DEMO

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

Answer 2

这样的事情：$('td:contains("No")').parent().hide();

的 Live Demo

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

Answer 3

通常我会在行上添加这个属性：

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

然后隐藏所有你可以做的事情：

$(function(){

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

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

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();

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

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

4 个答案: