Question

由于某种原因，每次我尝试搜索或键入Area15 / Uptown之类的文本时，它都不会删除不相关的文本，在这里我做错了什么吗？ / p>

我试图做一个过滤器或类似的东西，以过滤掉桌子上的东西，但似乎没有用，有人可以帮忙或建议我做错了什么吗？我的js里缺少什么吗？

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="search for places." title="Type in a name">

<table id="myTable">
    <tr class="header">
        <th style="width:60%">Town</th>
        <th style="width:40%">Area</th>
    </tr>
    <tr>
        <td>Downtown</td>
        <td>Area15</td>
    </tr>
    <tr>
        <td>Uptown</td>
        <td>Area16</td>
    </tr>
</table>


<script>
    function myFunction() {
    var input, filter, table, tr, td, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementByTagName("tr");
    for (i=0; i<tr.length; i++){
        td= tr[i].getElementByTagName("td")[0];
        if (td){
            if (td.innerHTML.toUpperCase().indexof(filter) >-1) {
                tr[i].style.display = " ";
            } else {
                tr[i}.style.display = "none";}
        }
    }
}
</script>

Answer 1

由于这行td= tr[i].getElementsByTagName("td")[0];，它仅搜索td内的第一个tr。getElementsByTagName返回一个集合，并且getElementsByTagName("td")[0]要求搜索仅在前td中输入，如果将其加到getElementsByTagName("td")[1]，它将仅在第二列中搜索

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

<input id='myInput' onkeyup="myFunction()">


<table id="myTable">
  <tr class="header">
    <th style="width:60%">Town</th>
    <th style="width:40%">Area</th>
  </tr>
  <tr>
    <td>Downtown</td>
    <td>Area15</td>
  </tr>
  <tr>
    <td>Downtown</td>
    <td>Area16</td>
  </tr>
</table>

使用js过滤

1 个答案: