JQuery的：錶行顯示/隱藏基於列值

我有有是/否的可能值JQuery的：錶行顯示/隱藏基於列值

<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 ActiveYN是'否' 我如何訪問JQuery中的ActiveYN並相應地顯示/隱藏？

來源

2013-07-18 Seenu

請提供呈現的html代碼 –

發佈HTML而不是ASP會更有意義，因爲jQuery是客戶端，並且更改了HTML，而不是您的severside代碼。 – adeneo

編輯了問題 – Seenu

DEMO

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

來源

2013-07-18 11:50:17

你可以從服務器端本身做到這一點。

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

使用此聲明你的按鈕點擊處理函數。但是，請記住它也會在任何地方找到包含「否」的任何文本。爲了使它更精確，使用正則表達式來準確搜索「否」。

來源

2013-07-18 11:33:02 Abhitalks

但是，這將是靜態的，不取決於用戶的交互 –

編輯答案。現在你可以從客戶端使用它。 – Abhitalks

其實我應該早些發佈純HTML，現在我發佈。我會放一個按鈕來隱藏或顯示。 – Seenu

如何像這樣：$('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>

來源

2013-07-18 11:45:58

通常我想補充一點作爲該行的屬性：

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

然後將其隱藏所有你能做的：

$(function(){ 

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

或者你可以在創建表時根據值添加不同的類/樣式。

來源

2013-07-18 12:26:08 dz15

JQuery的：錶行顯示/隱藏基於列值

回答

相關問題