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
That should do the job <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ $("select").change(function(){ var id=$(this).parent().attr('id'); var line = id.substring(0,1); var cell = id.substring(2,3); if($(this).val()=="no"){ for(i=parseInt(cell)+1;i<5;i++){ cellID = "#"+line+"-"+i; $(cellID).hide(); } }else{ for(i=parseInt(cell)+1;i<5;i++){ cellID = "#"+line+"-"+i; $(cellID).show(); } } }); }); </script> </head> <body> <table> <tr> <td id="1-1"><select><option>yes</option><option>no</option></td> <td id="1-2"><input type="text"></td> <td id="1-3"><select><option>yes</option><option>no</option></td> <td id="1-4"><input type="text"></td> </tr> <tr> <td id="2-1"><select><option>yes</option><option>no</option></td> <td id="2-2"><input type="text"></td> <td id="2-3"><select><option>yes</option><option>no</option></td> <td id="2-4"><input type="text"></td> </tr> <tr> <td id="3-1"><select><option>yes</option><option>no</option></td> <td id="3-2"><input type="text"></td> <td id="3-3"><select><option>yes</option><option>no</option></td> <td id="3-4"><input type="text"></td> </tr> </table> </body> </html> Code (markup):