如何使用纯 Javascript link 我对 table 的输入？

Question

我一直在努力解决这个问题，但我不知道我错过了什么。

我有一个 table，我可以使用 fetch 获取 API 信息。我希望输入在我输入时过滤用户。这就是我目前所拥有的，如果可能的话我想继续使用 filter() 和 pure Javascript。我相信我的问题是不知道如何访问行中的信息

const listItems = document.querySelectorAll("#data");

这条线似乎没有按我想要的方式工作。这是代码：

fetch(
  "https://gist.githubusercontent.com/SuecoMarcus/a77af69f0e84c3125a5c0cf43a3ac41b/raw/918cd058b7e2286a36e79643c63a5ebca097d7c8/users.json"
).then((response) => {
  response.json().then((data) => {
    let row = "";
    data.forEach((itemData) => {
      row += "<tr>";
      row += "<td>" + itemData.id + "</td>";
      row += "<td>" + itemData.firstname + "</td>";
      row += "<td>" + itemData.lastname + "</td>";
      row += "<td>" + itemData.age + "</td></tr>";
    });
    document.querySelector("#data").innerHTML = row;
  });
});

document.querySelector("#search-input").addEventListener("input", filterTable);

function filterTable(e) {
  const searchInput = document.querySelector("#search-input");
  const filter = searchInput.value.toLowerCase();
  const listItems = document.querySelectorAll("#data");
  listItems.forEach((item) => {
    let text = item.textContent;
    if (text.toLowerCase().includes(filter.toLowerCase())) {
      item.style.display = "";
    } else {
      item.style.display = "none";
    }
  });
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <title>Hack Academy - Proyecto Base</title>

    <!-- CSS de Bootstrap -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
      crossorigin="anonymous"
    />

    <!-- CSS Propio -->
    <link rel="stylesheet" href="css/styles.css" />
  </head>

  <body>
    <div class="container mt-5" id="app">
      <input
        style="width: inherit"
        id="search-input"
        placeholder="Ingresar texto a buscar...
      "
        type="search"
      />
      <table class="table table-search">
        <thead>
          <tr>
            <th>ID</th>
            <th>Nombre</th>
            <th>Apellido</th>
            <th>Edad</th>
          </tr>
        </thead>
        <tbody id="data"></tbody>
      </table>
    </div>

    <!-- JS de Bootstrap -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
      crossorigin="anonymous"
    ></script>
    <!-- JS Propio -->
    <script src="js/app.js"></script>
  </body>
</html>

Answer 1

const listItems = document.querySelectorAll("#data"); 选择整个 table 而不是单个 table 行。如果您指定 #data > tr，您将获得单行并可以遍历它们。试试这个：

fetch(
  "https://gist.githubusercontent.com/SuecoMarcus/a77af69f0e84c3125a5c0cf43a3ac41b/raw/918cd058b7e2286a36e79643c63a5ebca097d7c8/users.json"
).then((response) => {
  response.json().then((data) => {
    let row = "";
    data.forEach((itemData) => {
      row += "<tr>";
      row += "<td>" + itemData.id + "</td>";
      row += "<td>" + itemData.firstname + "</td>";
      row += "<td>" + itemData.lastname + "</td>";
      row += "<td>" + itemData.age + "</td></tr>";
    });
    document.querySelector("#data").innerHTML = row;
  });
});

document.querySelector("#search-input").addEventListener("input", filterTable);

function filterTable(e) {
  const searchInput = document.querySelector("#search-input");
  const filter = searchInput.value.toLowerCase();
  const listItems = document.querySelectorAll("#data > tr");
  listItems.forEach((item) => {
    let text = item.textContent;
    if (text.toLowerCase().includes(filter.toLowerCase())) {
      item.style.display = "";
    } else {
      item.style.display = "none";
    }
  });
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <title>Hack Academy - Proyecto Base</title>

    <!-- CSS de Bootstrap -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
      crossorigin="anonymous"
    />

    <!-- CSS Propio -->
    <link rel="stylesheet" href="css/styles.css" />
  </head>

  <body>
    <div class="container mt-5" id="app">
      <input
        style="width: inherit"
        id="search-input"
        placeholder="Ingresar texto a buscar...
      "
        type="search"
      />
      <table class="table table-search">
        <thead>
          <tr>
            <th>ID</th>
            <th>Nombre</th>
            <th>Apellido</th>
            <th>Edad</th>
          </tr>
        </thead>
        <tbody id="data"></tbody>
      </table>
    </div>

    <!-- JS de Bootstrap -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
      crossorigin="anonymous"
    ></script>
    <!-- JS Propio -->
    <script src="js/app.js"></script>
  </body>
</html>

Answer 2

我通过在 querySelector("#data") 末尾添加 childNodes 解决了你的问题

所以那一行应该是：

    const listItems = document.querySelector("#data").childNodes;

如何使用纯 Javascript link 我对 table 的输入？

How do I link my input to my table using pure Javascript?

javascript

input

html-table