Hide/show other cells in a row of a table using javascript

I have a query relating javascript hide/show cells in a table

I have created a table of 5 rows and 5 columns. The first row is drop down menu having Yes and No option and remaining cells in the row are two text box and two drop down menu.

I want to hide (or may be block) the other four cells as per the option selected from the drop down menu in the first row. If i select No from the drop down menu from the first row i want to hide the remaining cells in the row and if i select Yes I want to show the remaining cells in the row.

Can anyone please help me to solve this javascript issue.


  1. Set an appropriate event handler on your dropdown.
  2. Set the CSS display:none on the cells you want to hide. I accomplish this by creating a class for this situation and then using JavaScript to change the appropriate element’s className.