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

あなたは、デフォルトでは 'none' にテーブルの表示を設定することができます。その後の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>