CODEWITHSUNDEEP
jquery
Joseph U.
Joseph U.

Reputation: 4607

How do I hide rows in jQuery based on a particular condition?

I would like to filter out/hide rows that may not be relevant.

All the rows have the class of "dataRow"

Each row contains 6 columns. The first column contains a label and the next 5 columns all contain values.

If all the values in a particular row (other than the label in Column 1) contains a 0 then I would like to hide the row.

What would be a good approach to accomplish this in jQuery?

Upvotes: 0

Views: 771

Answers (1)

Alexander
Alexander

Reputation: 23537

You can try computing the sum over each row and then hide it accordingly.

$("tr.dataRow").each(function(){
  var hide = false;
  $("td:gt(0)", this).each(function(){
    if(+$(this).text()){
      hide = true;
    }
  });
  $(this).toggle(hide);
});

It would be nice to know if all target td elements are children of tr.dataRow, then .children() could be used.

If the above script, here there is a variant using parseFloat instead. Although, both codes should work.

$(function () {
  $("tr.dataRow").each(function () {
    var hide = false;
    $("td:gt(0)", this).each(function () {
      if (parseFloat($(this).text()) > 0) {
        hide = true;
      }
    });
    $(this).toggle(hide);
  });
});

Upvotes: 1

Related Questions