HTML 페이지를로드 한 후 테이블을 숨기려면 클릭시 테이블 표시

Question

간단한 검색 메뉴가 있습니다.

페이지로드 후 테이블을 숨기고 싶습니다. 쿼리 할 때 테이블 (검색 결과 표시)을 표시하고 싶습니다.

다른 리소스를 보았지만 시도했지만 실패했습니다.

감사

<script> 
    function myFunction() { 
      var input, filter, table, tr, td, i; 
      input = document.getElementById("myInput"); 
      filter = input.value.toUpperCase(); 
      table = document.getElementById("myTable"); 
      tr = table.getElementsByTagName("tr"); 
      for (i = 0; i < tr.length; i++) { 
      td = tr[i].getElementsByTagName("td")[3]; 
      if (td) { 
       if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
       tr[i].style.display = ""; 
       } else { 
       tr[i].style.display = "none"; 
       }   }   } } 
</script> 

     <input type="search" id="myInput" onkeyup="myFunction()"> 
     <input type="submit" name="cari" value=" "> 

     <table border="1px" id="myTable"> 
      <tr class="header"> 
      <th style="width:15%;">Kode Prov</th> 
      <th style="width:30%;">Prov</th> 
      <th style="width:15%;">Kode Kab</th> 
      <th style="width:40%;">Kab</th> 
      </tr> 
      <tr> 
      <td>11</td> 
      <td>Aceh</td> 
      <td>01</td> 
      <td>Aceh Tenggara</td> 
      </tr> 
      <tr> 
      <td>11</td> 
      <td>Aceh</td> 
      <td>02</td> 
      <td>Simeulue</td> 
      </tr> 
     </table> 

Answer 1

당신은 기본적으로 '없음'으로 테이블의 표시를 설정할 수 있습니다. 그런 다음하여 myFunction()에서 당신은 '블록'내가 입력 필드가 비어있을 때 전체 테이블을 숨기도록 코드를 변경 한

<script> 
 
    function myFunction() { 
 
    
 
      var input, filter, table, tr, td, i; 
 
      input = document.getElementById("myInput"); 
 
      filter = input.value.toUpperCase(); 
 
      table = document.getElementById("myTable"); 
 
      if(filter==""){ table.style.display="none";} 
 
      else{ 
 
      table.style.display="block"; 
 
      } 
 
      tr = table.getElementsByTagName("tr"); 
 
      for (i = 0; i < tr.length; i++) { 
 
      td = tr[i].getElementsByTagName("td")[3]; 
 
      if (td) { 
 
       if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
 
       tr[i].style.display = ""; 
 
       } else { 
 
       tr[i].style.display = "none"; 
 
       }   }   } } 
 
</script> 
 

 
     <input type="search" id="myInput" onkeyup="myFunction()"> 
 
     <input type="submit" name="cari" value=""> 
 

 
     <table border="1px" id="myTable" style="display:none"> 
 
      <tr class="header"> 
 
      <th style="width:15%;">Kode Prov</th> 
 
      <th style="width:30%;">Prov</th> 
 
      <th style="width:15%;">Kode Kab</th> 
 
      <th style="width:40%;">Kab</th> 
 
      </tr> 
 
      <tr> 
 
      <td>11</td> 
 
      <td>Aceh</td> 
 
      <td>01</td> 
 
      <td>Aceh Tenggara</td> 
 
      </tr> 
 
      <tr> 
 
      <td>11</td> 
 
      <td>Aceh</td> 
 
      <td>02</td> 
 
      <td>Simeulue</td> 
 
      </tr> 
 
     </table>

Answer 2

에 표시를 설정할 수 있습니다. 이게 도움이 되길 바란다. 다음은 코드입니다.

<script> 
    function myFunction() { 
      var input, filter, table, tr, td, i; 
      input = document.getElementById("myInput"); 
      filter = input.value.toUpperCase(); 
      table = document.getElementById("myTable"); 

      if(input.value == ""){ 
      table.style.display ="none"; 
      }else{ 
      table.style.display =""; 
      } 

      tr = table.getElementsByTagName("tr"); 
      for (i = 0; i < tr.length; i++) { 
      td = tr[i].getElementsByTagName("td")[3]; 
      if (td) { 
       if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
       tr[i].style.display = ""; 
       } else { 
       tr[i].style.display = "none"; 
       }   }   } } 
</script> 

     <input type="search" id="myInput" onkeyup="myFunction()"> 
     <input type="submit" name="cari" value=" "> 

     <table border="1px" id="myTable" style="display: none"> 
      <tr class="header"> 
      <th style="width:15%;">Kode Prov</th> 
      <th style="width:30%;">Prov</th> 
      <th style="width:15%;">Kode Kab</th> 
      <th style="width:40%;">Kab</th> 
      </tr> 
      <tr> 
      <td>11</td> 
      <td>Aceh</td> 
      <td>01</td> 
      <td>Aceh Tenggara</td> 
      </tr> 
      <tr> 
      <td>11</td> 
      <td>Aceh</td> 
      <td>02</td> 
      <td>Simeulue</td> 
      </tr> 
     </table> 

Answer 3

이 스크립트를 사용하면 문제가 해결됩니다.

function myFunction() { 
 
    var input, filter, table, tr, td, i; 
 
    input = document.getElementById("myInput"); 
 
    filter = input.value.toUpperCase(); 
 
    table = document.getElementById("myTable"); 
 
    tr = table.getElementsByTagName("tr"); 
 
    for (i = 0; i < tr.length; i++) { 
 
     td = tr[i].getElementsByTagName("td")[3]; 
 
     if (td) { 
 
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
 
       tr[i].style.display = ""; 
 
      } else { 
 
       tr[i].style.display = "none"; 
 
      } 
 
     } 
 
    } 
 
} 
 

 
window.onload = function() { 
 
    var table = document.getElementById("myTable") 
 
    , tr = table.getElementsByTagName("tr"); 
 
    for (i = 0; i < tr.length; i++) { 
 
     if (i > 0) 
 
      tr[i].style.display = "none"; 
 
    } 
 
}

<input type="search" id="myInput" onkeyup="myFunction()"> 
 
<input type="submit" name="cari" value=" "> 
 

 
<table border="1px" id="myTable"> 
 
<tr class="header"> 
 
    <th style="width:15%;">Kode Prov</th> 
 
    <th style="width:30%;">Prov</th> 
 
    <th style="width:15%;">Kode Kab</th> 
 
    <th style="width:40%;">Kab</th> 
 
</tr> 
 
<tr> 
 
    <td>11</td> 
 
    <td>Aceh</td> 
 
    <td>01</td> 
 
    <td>Aceh Tenggara</td> 
 
</tr> 
 
<tr> 
 
    <td>11</td> 
 
    <td>Aceh</td> 
 
    <td>02</td> 
 
    <td>Simeulue</td> 
 
</tr> 
 
</table>