asked on

Hide a table row (<tr></tr>) with Javascript?

Hi there.

I have this table where I want to hide specific rows until a specific value is chosen from a Select-panel.
I can hide a textbox or other elements, but my code doesn't work for a table row. Any idea why?
Here's the Javascript:

<script type="text/javascript">
function Check() {
   if (document.getElementById('mm_comor_infectious_choice').value == "Yes") {
        document.getElementById('a1').style.display = 'block';
    } 
    else {
        document.getElementById('a1').style.display = 'none';

   }
}

</script>

Open in new window

Here's the div-tags I "wrap" around the <tr></tr> in a table to hide it all until "Yes" is selected from the dropdown menu below:

<div id="a1" style="display:none" >
</div>

Open in new window

Select-panel:

<select name="mm_comor_infectious_choice" id="mm_comor_infectious_choice" onchange="Check();">
        <option value="na" selected="selected"></option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
      </select>

Open in new window

What's the trick to make it work? As mentioned: If I wrap a single element with the div-tags, then it works fine.

Best regards

Ulrich

leakim971

try your code on Chrome and Firefox to confirm you only have an issue with IE

ullenulle

ASKER

It doesn't work in Chrome either... and Explorer 11 or Edge. I don't use FireFox.

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ullenulle

ASKER

Hey leakim971.

Thank you. You changed the code a little... like defining the variable in the script and moving the codes in the div into the tr-tag. That made the trick. :-)))

Best regards

Ulrich

ullenulle

ASKER

Thank you again. Will your jsfiddle stay, or should I copy it here for future users?

leakim971

for the records :

function Check() {
	var v = document.getElementById('mm_comor_infectious_choice').value;
   if (v == "Yes") {
        document.getElementById('a1').style.display = 'block';
    } 
    else {
        document.getElementById('a1').style.display = 'none';

   }
}

Open in new window

<select name="mm_comor_infectious_choice" id="mm_comor_infectious_choice" onchange="Check();">
        <option value="na" selected="selected"></option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
      </select>
      <table>
      <tr id="a1"><td>OK</td></tr>
      </table>

Open in new window

ullenulle

ASKER

Here's your code. :-)

<select name="mm_comor_infectious_choice" id="mm_comor_infectious_choice" onchange="Check();">
        <option value="na" selected="selected"></option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
      </select>
      <table>
      <tr id="a1"><td>OK</td></tr>
      </table>

Open in new window

function Check() {
	var v = document.getElementById('mm_comor_infectious_choice').value;
   if (v == "Yes") {
        document.getElementById('a1').style.display = 'block';
    } 
    else {
        document.getElementById('a1').style.display = 'none';

   }
}

Open in new window

leakim971

thanks!

Hide a table row (&lt;tr&gt;&lt;/tr&gt;) with Javascript?

Hide a table row (<tr></tr>) with Javascript?