www.webdeveloper.com
Results 1 to 2 of 2

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

  1. #1
    Join Date
    Aug 2010
    Posts
    2

    Smile 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.

    Amar

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    one way to do it is:

    PHP 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=0tdO.lengthi=i+1) {
         
    tdO[i].style.display displayStatus;
        }
    }

    window.onload=function() {
     
    tdO getElementsByClassName(document"td""r1");
    }
    //-----------------------------

    function getElementsByClassName(oElmstrTagNamestrClassName) {
        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=0i<arrElements.lengthi++)
        {
            
    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> 

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles