JavaScript-如何根据从下拉列表中选择的值筛选表？-堆栈溢出

顺晟科技

2022-10-19 12:03:06

我有一个有三列的表，通常是从SQL数据库填充的。我想根据从下拉菜单中选择的值筛选第三列。我找到了W3学校教程并将其作为蓝图。然而，我无法使其工作:

顺晟科技：

当用户（在键盘上）释放一个键时，将发生onkeyup事件。

改为使用onchange。

<!DOCTYPE html>
    <html>
    <script>
      function filterSector() {
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("sector");
        filter = input.value;
        table = document.getElementById("portfolio");
        tr = table.getElementsByTagName("tr");

        for (i = 0; i < tr.length; i++) {
          td = tr[i].getElementsByTagName("td")[2];
          if (td) {
            txtValue = td.value;
            if (txtValue.indexOf(filter) > -1) {
              tr[i].style.display = "";
            } else {
              tr[i].style.display = "none";
            }
          }
        }
      }
    </script>

    <body>

      <select id="sector" onkeyup="filterSector()">
        <option selected disabled hidden>Sectors</option>
        <option value="Industrials">Industrials</option>
        <option value="Information Technology">Information Technology</option>
      </select>

      <table id="portfolio">
        <tr>
            <td>AAPL</td>
            <td>Apple</td>
            <td>Information Technology</td>
        </tr>
        <tr>
            <td>MMM</td>
            <td>3M</td>
            <td>Industrials</td>
        </tr>
    </body>

    </html>

您的筛选扇区函数下面的这行有问题。

<!DOCTYPE html>
    <html>
    <script>
      function filterSector() {
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("sector");
        filter = input.value;
        table = document.getElementById("portfolio");
        tr = table.getElementsByTagName("tr");

        for (i = 0; i < tr.length; i++) {
          td = tr[i].getElementsByTagName("td")[2];
          if (td) {
            txtValue = td.value;
            if (txtValue.indexOf(filter) > -1) {
              tr[i].style.display = "";
            } else {
              tr[i].style.display = "none";
            }
          }
        }
      }
    </script>

    <body>

      <select id="sector" onkeyup="filterSector()">
        <option selected disabled hidden>Sectors</option>
        <option value="Industrials">Industrials</option>
        <option value="Information Technology">Information Technology</option>
      </select>

      <table id="portfolio">
        <tr>
            <td>AAPL</td>
            <td>Apple</td>
            <td>Information Technology</td>
        </tr>
        <tr>
            <td>MMM</td>
            <td>3M</td>
            <td>Industrials</td>
        </tr>
    </body>

    </html>

td.value未定义。然后可以使用td.innertext来解决这个问题。

<!DOCTYPE html>
    <html>
    <script>
      function filterSector() {
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("sector");
        filter = input.value;
        table = document.getElementById("portfolio");
        tr = table.getElementsByTagName("tr");

        for (i = 0; i < tr.length; i++) {
          td = tr[i].getElementsByTagName("td")[2];
          if (td) {
            txtValue = td.value;
            if (txtValue.indexOf(filter) > -1) {
              tr[i].style.display = "";
            } else {
              tr[i].style.display = "none";
            }
          }
        }
      }
    </script>

    <body>

      <select id="sector" onkeyup="filterSector()">
        <option selected disabled hidden>Sectors</option>
        <option value="Industrials">Industrials</option>
        <option value="Information Technology">Information Technology</option>
      </select>

      <table id="portfolio">
        <tr>
            <td>AAPL</td>
            <td>Apple</td>
            <td>Information Technology</td>
        </tr>
        <tr>
            <td>MMM</td>
            <td>3M</td>
            <td>Industrials</td>
        </tr>
    </body>

    </html>

最终解决方案。我希望我能帮上忙。

在脚本中替换为

这将提取td值，然后可以进行比较

上一篇：JavaScript-如何使div只下一篇：HTML-使用justify-pos

网站建设

Html

JavaScript-如何根据从下拉列表中选择的值筛选表？-堆栈溢出