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. Amar
try this code... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> <!-- var tdO = new Array(); function showHideCells(val) { var displayStatus = (val == 'yes')? '' : 'none'; for(var i=0; i < tdO.length; i=i+1) { tdO[i].style.display = displayStatus; } } window.onload=function() { tdO = getElementsByClassName(document, "td", "r1"); } //----------------------------- function getElementsByClassName(oElm, strTagName, strClassName) { var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName); var arrReturnElements = new Array(); strClassName = strClassName.replace(/-/g, "\\-"); var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)"); var oElement; for(var i=0; i<arrElements.length; i++) { oElement = arrElements[i]; if(oRegExp.test(oElement.className)) { arrReturnElements.push(oElement); } } return (arrReturnElements) } //--> </script> </head> <body> <table> <tr> <td> <select name="mySelect" onchange="showHideCells(this.value)"> <option value='yes'>Yes</option> <option value='no'>No</option> </select> </td> <td class="r1"> Cell 2</td> <td class="r1"> Cell 3</td> <td class="r1"> Cell 4</td> <td class="r1"> Cell 5</td> </tr> <tr> <td>Cell 1</td> <td> Cell 2</td> <td> Cell 3</td> <td> Cell 4</td> <td> Cell 5</td> </tr> </table> </body> </html> Code (markup):