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，并将它们存储在一个名为HTMLCollection的{{1}}中。

cells

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

Answer 2

已更改此行td = tr[i].getElementsByTagName("td")[1];以使用索引[1]，因为您需要第二个td。索引[0]引用第一个TD。我建议使用一些类选择器来获取正确的td，因为当表结构发生更改时，这样做更加可靠。

还要在一个td（id="empname"）中使用一个ID。我假设您可以获得多行。如果是这样，您需要确保此ID是唯一的。最好不要在动态内容中使用id，而应在类中使用

。

function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("search2");
  filter = input.value.toUpperCase();
  console.log(filter);
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      txtValue = td.textContent || td.innerText;
      console.log(txtValue);
      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()" />

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

2 个答案: