Some ideas on indicating the active cells (or passive cells) of an HTML table (by coloring or by bluring or other)

Question

Hello all,

I have an html table, which includes let's say 1 row and 5 cells (C1, C2, C3, C4, C5). (Cells have specific content)

C1 - C2 - C3 - C4 - C5

Usage 1: C3 is used with C1 and C2 at the same time, Usage 2: C3 is used with C4 and C5 at the same time,

When I am using "C1, C2, C3" then C4 and C5 is not used or When I am using "C3, C4, C5" then C1 and C2 is not used,

So depending on the part that I will use of that HTML table, how can make some cells more attracting and others less ?

For example: If I use (Usage 1) then I want C4 and C5 to be not much attracting or I want them to be disabled, and C1-C2-C3 to be attracting or colored or whatever that comes to your mind.

Thanks.

Edit: To tell more about usage 1 and 2 I will tell about my system, my system is a report downloading system depending on the parameters that I give by using cells.

C1 and C2 includes checkbox lists

I have a Calender and a Submit button in C3,

C4 and C5 includes dropdownlists

The switch works like that, In C4 and C5 I can choose a special report with dropdownlists and then click submit button in C3, If I choose a special report, the parameters in C1 and C2 does not work. If I don't choose a special report from C4 and C5, then the parameters in C1 and C2 will work. But the calender in C3 will always work.

Answer 1

Basically, apply some default css class to all your cells, when you are using Usage1 for example, then apply some additional css class to cells C4 and C5 to make them disabled, also check if this additional class is applied to C1 and C2, if so remove it.

Similarly when using Usage2 apply this additional class to cells C1 and C2 and remove that from C4 and C5.

adding and removing css classes is easy in JQuery, use .addClass('className') and .removeClass('className')

Edit:

In response to your edit, try the logic I mentioned above when user clicks submit. In the JavaScript function which handles submit add and remove css classes to the cells.

Thanks