带有 onkeyup 事件的 Javascript 搜索栏不起作用

Question

我这里有一个搜索栏，我可以在其中搜索员工 onkeyup 事件。但是当我尝试添加类和另一个 td 标签时，该功能不起作用。请在下面查看我的代码。任何帮助将非常感激。谢谢!

function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("search2");
  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";
      }
    }
  }
}

<table id="myTable">
  <tr>
    <td class="imageindent">
      <img src="img.jpg" border="1" style="border-color:#CCCCCC" />
    </td>

    <td class="gentext" id="empname"> JOHN BRYAN SMITH <span class="textCapitalized"></span>
      <span class="textCapitalized">
        Gray<br />JohnSMith@gmail.com      <br />
      </span>
    </td>

    <td class="gentext"><span class="texblue">JUNIOR PRODUCER</span>/<br />EVENTS</td>
    <td width="120" class="title2">2114</td>
  </tr>
</table>
<input name="search" type="text" class="textsimple" id="search2" onkeyup="myFunction()" />

Answer 1

这就是您使用现代 Javascript 的方式。如果有任何不清楚的地方，请告诉我，以便我详细解释。

作为旁注:每个 tr “知道”它是 td s 并将它们存储在 HTMLCollection 中称为 cells .

search2.addEventListener('input', () => {
  myTable.querySelectorAll('tr').forEach(row => row.hidden = row.cells[1].innerText.toUpperCase().indexOf(search2.value.toUpperCase()) === -1)
})

<table id="myTable">
  <tr>
    <td class="imageindent">
      <img src="img.jpg" border="1" style="border-color:#CCCCCC" />
    </td>

    <td class="gentext"> JOHN BRYAN SMITH <span class="textCapitalized"></span>
      <span class="textCapitalized">
        Gray<br />JohnSMith@gmail.com      <br />
      </span>
    </td>

    <td class="gentext"><span class="texblue">JUNIOR PRODUCER</span>/<br />EVENTS</td>
    <td width="120" class="title2">2114</td>
  </tr>
  <tr>
    <td class="imageindent">
      <img src="img.jpg" border="1" style="border-color:#CCCCCC" />
    </td>

    <td class="gentext"> JACK BRUCE <span class="textCapitalized"></span>
      <span class="textCapitalized">
        Gray<br />JackBruce@gmail.com      <br />
      </span>
    </td>

    <td class="gentext"><span class="texblue">JUNIOR PRODUCER</span>/<br />EVENTS</td>
    <td width="120" class="title2">2114</td>
  </tr>
</table>
<input name="search" type="text" class="textsimple" id="search2" />