Question

我想在表格中放置一个按钮（使用过滤器功能之后）以清洁搜索字段并自动返回表格。我该怎么办？

现在，代码的工作方式如下：

首先，您需要单击清除按钮，然后返回到整个表，您需要单击按钮“返回表”。

非常抱歉，我的英语水平。

function myFilterTable() {
  var input, filter, table, tr, td, i, xtValue;
  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) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

<form>
  <p><input type="text" id="myInput" onkeyup="myFilterTable()" placeholder="search " /><input type="reset" value="Clear" title="clear text" /></p>
</form>
<p><button onclick="myFilterTable()" title="click clean before returning to the table">return to the table</button></p>
<table id="myTable" bordercolor="dodgerblue" border="4" cellpadding="1" cellspacing="1">
    <thead>
        <tr>
            <th scope="col">/</th>
            <th scope="col">wine</th>
            <th scope="col">beer</th>
            <th scope="col">water</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>table</td>
            <td>yes</td>
            <td>no</td>
            <td>no</td>
        </tr>
        <tr>
            <td>city<span style="white-space:pre"> </span></td>
            <td>yes</td>
            <td>no</td>
            <td>no</td>
        </tr>
        <tr>
            <td>house</td>
            <td>yes</td>
            <td>no</td>
            <td>no</td>
        </tr>
    </tbody>
</table>

Answer 1

首先，避免使用type="reset"，它可以很好地用于表单，但事实并非如此。

相反，请使用type="button"并绑定两个操作：

清除输入字段
再次调用myFilterTable()，因此它将对空字符串重新执行过滤器并显示所有结果

比看起来容易：

function myFilterTable() {
  var input, filter, table, tr, td, i, xtValue;
  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) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

function resetSearch() {
  var input = document.getElementById("myInput");
  input.value = '';
  myFilterTable();
}

<form>
  <p><input type="text" id="myInput" onkeyup="myFilterTable()" placeholder="search " /><input type="button" onclick="resetSearch()" value="Clear" title="clear text" /></p>
</form>
<p><button onclick="myFilterTable()" title="click clean before returning to the table">return to the table</button></p>
<table id="myTable" bordercolor="dodgerblue" border="4" cellpadding="1" cellspacing="1">
    <thead>
        <tr>
            <th scope="col">/</th>
            <th scope="col">wine</th>
            <th scope="col">beer</th>
            <th scope="col">water</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>table</td>
            <td>yes</td>
            <td>no</td>
            <td>no</td>
        </tr>
        <tr>
            <td>city<span style="white-space:pre"> </span></td>
            <td>yes</td>
            <td>no</td>
            <td>no</td>
        </tr>
        <tr>
            <td>house</td>
            <td>yes</td>
            <td>no</td>
            <td>no</td>
        </tr>
    </tbody>
</table>

Answer 2

您可以将一个参数添加为布尔值。单击清除按钮时将其设置为true。

我还建议通过内联使用javascript事件绑定。

function myFilterTable(clear) {
  var input, filter, table, tr, td, i, xtValue;
  input = document.getElementById("myInput");
  filter = clear ? "" : 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) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

<form>
  <p><input type="text" id="myInput" onkeyup="myFilterTable(false)" placeholder="search " /><input onclick="myFilterTable(true)" type="reset" value="Clear" title="clear text" /></p>
</form>
<table id="myTable" bordercolor="dodgerblue" border="4" cellpadding="1" cellspacing="1">
    <thead>
        <tr>
            <th scope="col">/</th>
            <th scope="col">wine</th>
            <th scope="col">beer</th>
            <th scope="col">water</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>table</td>
            <td>yes</td>
            <td>no</td>
            <td>no</td>
        </tr>
        <tr>
            <td>city<span style="white-space:pre"> </span></td>
            <td>yes</td>
            <td>no</td>
            <td>no</td>
        </tr>
        <tr>
            <td>house</td>
            <td>yes</td>
            <td>no</td>
            <td>no</td>
        </tr>
    </tbody>
</table>

筛选表格后如何重设结果

2 个答案: