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（）中，您可以将显示设置为'block'

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

HTML页面加载后隐藏表格，单击时显示表格

3 个答案: