Question

我是网络开发的新手，但很快就开始了。我正在为我的公司开发一个wiki页面，我有一个过滤表，但我想隐藏表，直到用户输入搜索文本时应用过滤器功能。所以这样它只显示文本输入框，然后当他们输入搜索时，表格结果会显示出来。

我正在使用此Javascript进行过滤：

abbas@abbas:~/hadoop-2.7.3$ export JAVA_HOME=/usr/lib/jvm/java-8-oracle
abbas@abbas:~/hadoop-2.7.3$ export PATH=${JAVA_HOME}/bin:${PATH}
abbas@abbas:~/hadoop-2.7.3$ export HADOOP_CLASSPATH=${JAVA_HOME}/lib/tools.jar
abbas@abbas:~/hadoop-2.7.3$ bin/hadoop com.sun.tools.javac.Main WordCount.java 
abbas@abbas:~/hadoop-2.7.3$ sudo jar cf wc.jar WordCount*.class
abbas@abbas:~/hadoop-2.7.3$ bin/hadoop jar wc.jar WordCount tempfile output8

17/06/09 02:20:24 INFO client.RMProxy: Connecting to ResourceManager at /0.0.0.0:8032
17/06/09 02:20:25 WARN mapreduce.JobResourceUploader: Hadoop command-line option parsing not performed. Implement the Tool interface and execute your application with ToolRunner to remedy this.
17/06/09 02:20:26 INFO mapreduce.JobSubmitter: Cleaning up the staging area /tmp/hadoop-yarn/staging/abbas/.staging/job_1496953867826_0001

Exception in thread "main" org.apache.hadoop.mapreduce.lib.input.InvalidInputException: Input path does not exist: hdfs://localhost:9000/user/abbas/tempfile
    at org.apache.hadoop.mapreduce.lib.input.FileInputFormat.singleThreadedListStatus(FileInputFormat.java:323)
    at org.apache.hadoop.mapreduce.lib.input.FileInputFormat.listStatus(FileInputFormat.java:265)
    at org.apache.hadoop.mapreduce.lib.input.FileInputFormat.getSplits(FileInputFormat.java:387)
    at org.apache.hadoop.mapreduce.JobSubmitter.writeNewSplits(JobSubmitter.java:301)
    at org.apache.hadoop.mapreduce.JobSubmitter.writeSplits(JobSubmitter.java:318)
    at org.apache.hadoop.mapreduce.JobSubmitter.submitJobInternal(JobSubmitter.java:196)
    at org.apache.hadoop.mapreduce.Job$10.run(Job.java:1290)
    at org.apache.hadoop.mapreduce.Job$10.run(Job.java:1287)
    at java.security.AccessController.doPrivileged(Native Method)
    at javax.security.auth.Subject.doAs(Subject.java:422)
    at org.apache.hadoop.security.UserGroupInformation.doAs(UserGroupInformation.java:1698)
    at org.apache.hadoop.mapreduce.Job.submit(Job.java:1287)
    at org.apache.hadoop.mapreduce.Job.waitForCompletion(Job.java:1308)
    at WordCount.main(WordCount.java:59)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:498)
    at org.apache.hadoop.util.RunJar.run(RunJar.java:221)
    at org.apache.hadoop.util.RunJar.main(RunJar.java:136)

在基本搜索表上使用此HTML代码：

  function ContactsearchFX() {
  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")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";

      }
    }
  }
}

....等等。

Answer 1

你可以给表隐藏它的默认样式，这样当它呈现时，它的默认状态将被隐藏。

<input type="text" id="myInput" onkeyup="ContactsearchFX()" placeholder="Search for names..">

<table id="myTable" style="display:none;">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Number</th>
  </tr>
   <tr>
    <td>contact</td>
    <td>number</td>
  </tr>
     <tr>
    <td>contact</td>
    <td>number</td>
  </tr>
  <tr>
    <td>contact</td>
    <td>number</td>
  </tr>

Answer 2

我建议在页面加载时运行ContactsearchFX函数：

document.addEventListener('DOMContentLoaded', ContactsearchFX);

...并且要求filter不是显示行的条件中的空字符串。

这有一个特别的优点：某些浏览器会记住输入框中输入的最后一个文本，并在页面加载时自动填充该文本。使用此解决方案，将立即过滤相应的表行。

为了获得更具响应性的效果，我会删除onkeyup="ContactsearchFX()" HTML属性，而是添加以下JavaScript：

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('myInput').addEventListener('input', ContactsearchFX);
});

另请考虑使用yucchiy/minesweeper field.go#GetNeighbors(x, y int)和cells个集合，而不是getElementsByTagName

可能你想让标题行不在过滤过程中，所以你的循环应该从1开始而不是0。

document.addEventListener('DOMContentLoaded', function () {
    ContactsearchFX();
    document.getElementById('myInput').addEventListener('input', ContactsearchFX);
});

function ContactsearchFX() {
  var input, filter, table, tr, td, i;     
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.rows;
  for (i = 1; i < tr.length; i++) {
    td = tr[i].cells[0];
    if (td) {
      tr[i].style.display = filter && td.textContent.toUpperCase().indexOf(filter) > -1
        ? "" : "none";
    }
  }
}

<input type="text" id="myInput" placeholder="Search for           names..">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Number</th>
  </tr>
  <tr>
    <td>test 1</td>
    <td>number</td>
  </tr>
  <tr>
    <td>test 2</td>
    <td>number</td>
  </tr>
  <tr>
    <td>test 3</td>
    <td>number</td>
  </tr>
</table>

Answer 3

＆＃13;

window.onload = function() {
  var rows = document.querySelectorAll('tr:not(.header)');

  for (var i = 0; i < rows.length; i++) {
    rows[i].style.display = 'none';
  }
}

function ContactsearchFX() {
  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")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";

      }
    }
  }
  
   var rows = document.querySelectorAll('tr:not(.header)');
   
   if (input.value.length == 0) {
    for (var i = 0; i < rows.length; i++) {
      rows[i].style.display = 'none';
    }
  }
}

＆＃13;

<input type="text" id="myInput" onkeyup="ContactsearchFX()" placeholder="Search for           names..">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Number</th>
  </tr>
  <tr>
    <td>test 1</td>
    <td>number</td>
  </tr>
  <tr>
    <td>test 2</td>
    <td>number</td>
  </tr>
  <tr>
    <td>test 3</td>
    <td>number</td>
  </tr>

＆＃13;

这似乎可以解决问题！在窗口的加载中，它遍历所有现在具有标题类的表行。所以你的标题总是可见的。

然后，正如您的代码最初所做的那样，它会遍历表并筛选出匹配的代码。

在此之后，我只是添加了另一个循环，然后将行设置回显示：如果输入框中没有任何内容，则为none。

希望这就是你要找的东西。

如何在搜索中输入过滤/输入之前隐藏表格

3 个答案: