CODEWITHSUNDEEP
javascriptjquery
Richard
Richard

Reputation: 8935

JavaScript/JQuery conditionally hide rows in a table

I am using JQuery, and would like to hide rows in a table depending on the value of one of its cells.

I have the following table:

<tr class="tr-class">
  <td class="status">
    <span class="status_submitted">submitted</span>
  </td>
</tr>
<tr class="tr-class">
  <td class="status">
    <span class="status_approved">approved</span>
  </td>
</tr>

I also have the following functions, where I can hide/show the <tr>.

function showSubmitted() {
     $(".tr-class").show();
}
function hideSubmitted() {
     $(".tr-class").hide();
}

But this hides/shows all the rows.

Question

How do I conditionally hide/show the rows?

For example, function hideSubmitted() should just hide the rows where the status cell is submitted.

JSFiddle https://jsfiddle.net/31c90zbv/1/

Upvotes: 1

Views: 843

Answers (4)

Atul Rajput
Atul Rajput

Reputation: 4178

From your question: For example, function hideSubmitted() should just hide the rows where the status cell is submitted.

For this you can change your code like it

  function hideSubmitted() {
    $('.status_submitted').closest(".tr-class").hide();
  }

this will find the closest tr-class to submitted one and hide that one only.

Upvotes: 3

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11055

I think you are looking for text search and the answer is Jquery contains:

function showSubmitted() {
   $(".tr-class:contains(submitted)").show();
}
function hideSubmitted() {
   $(".tr-class:contains(submitted)").hide();
}

Upvotes: 2

Alex197
Alex197

Reputation: 923

You can simply use:

function showSubmitted() {
    $(".tr-class").each(function(){
        if($(this).find('.status_submitted').length > 0) $(this).show();
    });
}

function hideSubmitted() {
    $(".tr-class").each(function(){
        if($(this).find('.status_submitted').length > 0) $(this).hide();
    });
}

And if you want to reduc your code you can do:

function showTr(type) {
    $(".tr-class").each(function(){
        if($(this).find('.status_'+type).length > 0) $(this).show();
    });
}

function hideTr(type) {
    $(".tr-class").each(function(){
        if($(this).find('.status_'+type).length > 0) $(this).hide();
    });
}

showTr('approved');
showTr('submitted');

Upvotes: 0

Jerry
Jerry

Reputation: 406

Using plain javascript , you could do some thing like :

function toggle_by_class(cls, on) {
    var lst = document.getElementsByClassName(cls);
    for(var i = 0; i < lst.length; ++i) {
        lst[i].style.display = on ? '' : 'none';
    }
}

Upvotes: 0

Related Questions