I have a query regarding the hide/show of the cells in a table.

The first column is 'Yes and No' options using combo box, 2nd option is 'input field', 3rd column is also 'Yes and No' option using combo box, and 4th option is also 'input field'.

What I want is to make a table using JAVASCRIPT, in which if i select 'No' from the first row first column, i want to hide the remaining 3 cells of the first row. Otherwise if i select 'yes' from the first row first column i want to show all the 3 other options of the first row. Also in between if I select 'No' from the first row third column i want to hide the first row fourth column cell. Selecting 'yes' from the first row third column will show the first row fourth column.

I want apply the same setting of hide and show cells into the remaining columns also.

By selecting 'no' from first column -> hide other corresponding cells of the row
by selecting 'yes' from the first column -> show other corresponding cells of the row

AND ALSO

By selecting 'no' from third column -> hide fourth cell of the corresponding/same row
by selecting 'yes' from the third column -> show fourth cell of the corresponding/same row


I have posted this question in the tablular form, but it is now showing in the proper format. Anyone in the forum please help me to make this table using JAVASCRIPT. I need this table within a day or two.

Waiting for someone's reply.

Amarjit

As I'm not that hardcore "normal" JavaScripter you will get my solution done with the jQuery library:

//When the user has clicked an option in the dropdownlist...
$(".yesOrNo").focusOut(function(){
   //if the submitted value is true
   if ($(this).val()) {
      //Then show the rest of the row
      var restOfRow = $(this).parent();
      restOfRow.children().css("display", "block");
   }
}

You will ofcourse have to modify it to match your own site before you can use it. And I'm not completely sure it's done correctly since I just wrote it down and haven't tested it :)

In this case, the other options in the row must have a default value of "display: none;" or do the whole thing with the visibility settings, maybe that is better...

If your problem has been solved, please also mark the thread as solved :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.