Question

所以我想要一个html表只显示用户在输入中输入了1个或多个字母的时间。到目前为止，我所尝试的并没有奏效。这是html（我还没有包括我的全部表格）：

        <input type="text" id="schoolName" onkeyup="search()" placeholder="Search for names..">
        <table class="table">
        <thead><tr>
        <th title="Field #1">Official Name</th>
        <th title="Field #2">Local Name</th>
        <th title="Field #3">Address 1</th>
        <th title="Field #4">Address 2</th>
        <th title="Field #5">Address 3</th>
        <th title="Field #6">Address 4</th>
        <th title="Field #7">County</th>
        </tr></thead>

这里是js：

document.getElementById("search").addEventListener(search);
function search() {
if(document.getElementById("schoolName").value.length>1) {
    document.getElementById("table").style.visibility="visible";
 } else {
    document.getElementById("table").style.visibility="hidden";
 }
}

这里是css：

.table{
visibility: hidden;
display: block;
height: 150px;
 overflow-y: scroll;
overflow-x: hidden; 
}

我不知道如何做这项工作，谢谢你的帮助

Answer 1

试试这个。还将id中的getElementById更改为代码中实际的table，并将id改为document.getElementById("schoolName").addEventListener('change', function() { if (document.getElementById("schoolName").value.length > 1) { document.getElementById("table1").style.visibility = "visible"; } else { document.getElementById("table1").style.visibility = "hidden"; } });。

＆＃13;

<input type="text" id="schoolName" placeholder="Search for names..">
<table id="table1" class="table">
  <thead>
    <tr>
      <th title="Field #1">Official Name</th>
      <th title="Field #2">Local Name</th>
      <th title="Field #3">Address 1</th>
      <th title="Field #4">Address 2</th>
      <th title="Field #5">Address 3</th>
      <th title="Field #6">Address 4</th>
      <th title="Field #7">County</th>
    </tr>
  </thead>

＆＃13;

function clickTest(){
  var fs = require('fs');
  var lineReader = require('readline').createInterface({
    input: fs.createReadStream(filePath)
  });

  lineReader.on('line', function(line){
    document.getElementById("demo").innerHTML += line;
  });
}

＆＃13;

如何在搜索栏中输入字母之前隐藏html表格？

1 个答案: