JavaScript/JQuery conditionally hide rows in a table

Question

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/

You are using class = tr-class which overlooks all other id's . You need to use something more paticuar for every particular row. — Jerry
– Jerry, Commented Jul 28, 2020 at 7:22
@Richard > $(".status_submitted").parent().parent().hide(); should work. — Mohan Rajput
– Mohan Rajput, Commented Jul 28, 2020 at 7:24

Always Helping · Accepted Answer · 2020-07-28 08:25:55Z

3

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.

edited Jul 28, 2020 at 8:25

Always Helping

14.6k4 gold badges16 silver badges30 bronze badges

answered Jul 28, 2020 at 7:22

Atul Rajput

4,1962 gold badges14 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ali Sheikhpour · Accepted Answer · 2020-07-28 07:25:44Z

2

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

answered Jul 28, 2020 at 7:25

Ali Sheikhpour

11.4k5 gold badges53 silver badges100 bronze badges

Comments

Jerry · Accepted Answer · 2020-07-28 07:23:22Z

0

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';
    }
}

answered Jul 28, 2020 at 7:23

Jerry

4266 silver badges24 bronze badges

Comments

Alex197 · Accepted Answer · 2020-07-28 07:24:22Z

0

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

answered Jul 28, 2020 at 7:24

Alex197

9212 gold badges11 silver badges27 bronze badges

Collectives™ on Stack Overflow

JavaScript/JQuery conditionally hide rows in a table

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related