javascript hide/show html tags with dropdown list

Question

I'm trying to show/hide tr tags using class attributes with a dropdown list in javascript. It works with id attributes but when I use class attributes it doesn't.

I searched a lot on the internet, and i did a for loop, but it doesn't work.

<select id='optionList' onchange="display_tr(document.getElementById('optionList').value);"> 
    <option value='ALL'>ALL</option> 
    <option value='M.1'>M.1</option> 
    <option value='M.2'>M.2</option> 
    <option value='M.3'>M.3</option> 
</select> 


<table id='ErrorDisplayTable' style='width:100%'>
    <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> </tr>
    <tr>
    <tr id='M.1' class='ALL' style='display:none;'>
        <td>L11</td><td>M.1</td><td>( 11:31:52.250 ; 11:34:45.842 )</td><td>( 2038 ; 4113 )</td><td> TQ &#8712 [1-7]  &#10154 173s.</td>
    </tr>
    <tr id='M.2' class='ALL' style='display:none;' >
        <td>L11</td><td>M.2</td><td>( 11:31:52.250 ; 11:34:45.842 )</td><td>( 1056 ; 3587 )</td><td> TQ &#8712 [1-7]  &#10154 84s.</td>
    </tr>
    <tr id='M.3' class='ALL' style='display:none;' >
        <td>L11</td><td>M.3</td><td>( 11:31:52.250 ; 11:34:45.842 )</td><td>( 10056 ; 10598 )</td><td>  TQ &#8712 [1-7]  &#10154 25s.</td>
    </tr>
</table>


  <script>

    function display_tr(show) {

        var test = document.getElementsByClassName('ALL');
        for(i=0; i<test.length; i++){
            test[i].style.display='none';
        }

        document.getElementById('M.1').style.display = 'none';
        document.getElementById('M.2').style.display = 'none';
        document.getElementById('M.3').style.display = 'none';
        document.getElementById(show).style.display = 'block';
    }

  </script>

I want to show every tr tags when the list has 'ALL' value.
Any one please provide me an answer ?

Answer 1

To hide all tr which are all having ALL class Use the following $(".ALL").hide(); To show all tr which are all having ALL class Use the following $(".ALL").show();

If you want to use pure javascript use the following code snipet

elements = document.getElementsByClassName("ALL");
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.display="none";
    }

Answer 2

You cannot use full stop in the id.

Following are the characters that are invalid in id tag ~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \\ { } | ` #

Thanks

Answer 3

Do not use dots in ids! rest is explained in snippet..

 $("#optionList").change(function() { $("#ErrorDisplayTable tr").not("tr:nth-child(1)").hide(); /*hides all except first row*/ if (this.value === "ALL") { /*check is value is ALL*/ $("#ErrorDisplayTable tr").show(); } else { /*if not all shows selected element*/ $("#ErrorDisplayTable #" + this.value).show(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id='optionList'> <option value='ALL'>ALL</option> <option value='M1'>M.1</option> <option value='M2'>M.2</option> <option value='M3'>M.3</option> </select> <table id='ErrorDisplayTable'> <tr id="ALL"> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> </tr> <tr> <tr id='M1'> <!--- using a dot in a id is very bad! --> <td>L11</td> <td>M.1</td> <td>( 11:31:52.250 ; 11:34:45.842 )</td> <td>( 2038 ; 4113 )</td> <td>TQ &#8712 [1-7] &#10154 173s.</td> </tr> <tr id='M2'> <!--- using a dot in a id is very bad! --> <td>L11</td> <td>M.2</td> <td>( 11:31:52.250 ; 11:34:45.842 )</td> <td>( 1056 ; 3587 )</td> <td>TQ &#8712 [1-7] &#10154 84s.</td> </tr> <tr id='M3'> <!--- using a dot in a id is very bad! --> <td>L11</td> <td>M.3</td> <td>( 11:31:52.250 ; 11:34:45.842 )</td> <td>( 10056 ; 10598 )</td> <td>TQ &#8712 [1-7] &#10154 25s.</td> </tr> </table> 

Edit: the short with use of ternary operator .

 $("#optionList").change(function() { $("#ErrorDisplayTable tr").not("tr:nth-child(1)").hide(); /*hides all except first row*/ var elements = (this.value === "ALL" ? "tr" : "#" + this.value); $("#ErrorDisplayTable " + elements).show(); /*generates wich element, if ALL than show all, if not ALL show what ask for*/ }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id='optionList'> <option value='ALL'>ALL</option> <option value='M1'>M.1</option> <option value='M2'>M.2</option> <option value='M3'>M.3</option> </select> <table id='ErrorDisplayTable'> <tr id="ALL"> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> </tr> <tr> <tr id='M1'> <!--- using a dot in a id is very bad! --> <td>L11</td> <td>M.1</td> <td>( 11:31:52.250 ; 11:34:45.842 )</td> <td>( 2038 ; 4113 )</td> <td>TQ &#8712 [1-7] &#10154 173s.</td> </tr> <tr id='M2'> <!--- using a dot in a id is very bad! --> <td>L11</td> <td>M.2</td> <td>( 11:31:52.250 ; 11:34:45.842 )</td> <td>( 1056 ; 3587 )</td> <td>TQ &#8712 [1-7] &#10154 84s.</td> </tr> <tr id='M3'> <!--- using a dot in a id is very bad! --> <td>L11</td> <td>M.3</td> <td>( 11:31:52.250 ; 11:34:45.842 )</td> <td>( 10056 ; 10598 )</td> <td>TQ &#8712 [1-7] &#10154 25s.</td> </tr> </table>