javascript hide/show html 带有下拉列表的标签

Question

我正在尝试 show/hide tr 标签使用 class 属性和 javascript 中的下拉列表。它适用于 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 class 的 tr，请使用以下 $(".ALL").hide(); 要显示所有具有 ALL class 的所有 tr，请使用以下 $(".ALL").show();

如果你想使用纯javascript使用下面的代码snipet

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>

编辑： 使用 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>

javascript hide/show html 带有下拉列表的标签

javascript hide/show html tags with dropdown list

html

javascript

getelementsbyclassname