javascript隐藏/显示带有下拉列表的html标签

Question

我正在尝试使用带有JavaScript中的下拉列表的class属性来显示/隐藏tr标记。 它可以使用id属性，但是当我使用class属性时却不能。

我在互联网上搜索了很多内容，并进行了for循环，但这是行不通的。

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

当列表具有“ ALL”值时，我想显示每个tr标签。
有人可以给我一个答案吗？

Answer 1

要隐藏所有具有ALL类的所有tr，请使用以下$(".ALL").hide(); 要显示所有具有ALL类的所有tr，请使用以下$(".ALL").show();

如果要使用纯JavaScript，请使用以下代码段

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

Answer 2

您不能在ID中使用句号。

以下是ID标签〜中无效的字符！ @ $％^＆*（）+ =，。 /'; ：“？> <[] \\ {} |`＃

谢谢

Answer 3

不要在ID中使用圆点！ 其余内容在摘要中进行了说明。

 $("#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> 

编辑：使用三元运算符的缩写。

 $("#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>