Question

Hide a row in a table.

Forms

Updated April 29, 2015

asked on April 28, 2015

I have a table displaying part numbers. Each row is a part number. A column in each row allows me to designate a type of part simply by using a check box.

I would like to hide that entire row if that row contains a certain value checked.

Any suggestions?

0 0

Answer

SELECTED ANSWER

replied on April 29, 2015

What timing! We just completed our test. We managed to achieve the goal and bypassing CSS altogether.

We could not have gotten this far without you. Thank you soo much.

$(function() {
$(".checkbox input:checked").each(function(){
if ($(this).val() == "Hide_Row"){
$(this).closest("tr").show();
} else {
$(this).closest("tr").hide();
}
});
});

0 0

Replies

replied on April 28, 2015

Are you referring to hiding the row with the certain checkbox value when saving a copy of the form as an image or PDF into the repository? Or should the row in the table be hidden immediately after the user checks the box?

0 0

replied on April 28, 2015

Closer to the second option.

1) Form A: User enters part in row and checks a box if part belongs to someone

2) Form B: Has table variable from form a so data will appear as it was in Form A. However, if box is checked, I want the row containing that part to be hidden on that form B.

So both form A and B are identical. Only form B is opened by an individual. And I want only his parts to appear. The others should be hidden from his view.

I hope that clarifies things.

0 0

replied on April 28, 2015 • Show version history

*Edited 4/29/2015*

Here's an example form:

The checkbox column in the table has the CSS class "checkbox" and the checkbox options/values are as follows:

I made a copy of this form so for now, Form A and Form B are identical. Change to Form B and add the following CSS and Javascript:

CSS

tr.hiderow {display:none;}

JavaScript

$(function() {
  $(".checkbox input:checked").each(function(){
    if ($(this).val() == "Hide_Row"){
      $(this).closest("tr").removeClass("hiderow");
    } else {
      $(this).closest("tr").addClass("hiderow");
    }
  });
});

Then configure the business process modeler such that the start message event uses Form A and then the next user task uses Form B. That way the initial submitter will fill out the part number, check the appropriate check box and submit the form

And then the second user will see

0 0

replied on April 29, 2015

Thank you soo much for your help. The problem is almost solved. What I need is the opposite. I want to block all lines except for Hide Row.

So, if user B opens Form B he should only see items for Type 1. All other 8 possible items I have should be blocked.

I have an idea I am going to try...

0 0

replied on April 29, 2015 • Show version history

You can just swap "addClass" and "removeClass" in the JavaScript posted previously. I've edited my previous post to correspond with your clarified description.

The hiderow CSS class is to hide the row in that table. When the checkbox value matches what what you're looking for (in the example above, it's "Hide_Row") you want to "removeClass" such that the row is visible. Then for everything else that doesn't match up with "Hide_Row" it will "addClass" therefore hiding that row.

0 0

You are not allowed to follow up in this post.

Question

Question

Hide a row in a table.

Answer

Replies

Sign in to reply to this post.