时间戳

首页 > 解决方案 > 带有 API 的 Javascript 过滤表

javascript - 带有 API 的 Javascript 过滤表

问题描述

所以我试图在从 api 获取后过滤表中的数据，但它没有用。这是我的代码示例，有人可以帮助我使用 javascript 从表中过滤数据。谢谢

JSON占位符 

    <div class="container">
            <div class="row">
                <div class="col l3" id="filternav">
                        <a class="black-text"><h6 id="getUsers">Users</h6></a>
                </div>
                <div class="col l9" id="output">
                    <h1 class="center-align">No Data</h1>
                </div>
            </div>
    </div>


</body>

这是我的脚本

<script>
    document.getElementById('getUsers').addEventListener('click', getUsers);

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


    function getUsers(){
        fetch('https://jsonplaceholder.typicode.com/Users')
        .then((res) => res.json())
        .then((data) => {
        let output = '<h4>Users</h4><input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">';
        data.forEach(function(user){
            output += `
            <table id="myTable">
                <tr>
                    <td>${user.id}</td>
                    <td>${user.name}</td>
                </tr>
            `;
        });
        document.getElementById('output').innerHTML = output;
        })
    }
</script>

标签： javascriptapi

解决方案

您将获得td每个中的第一个tr，应该是第二个。

<!DOCTYPE html>
<html>

<head>
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Test</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
   <div class="container">
      <div class="row">
         <div class="col l3" id="filternav">
            <a class="black-text">
               <h6 id="getUsers">Users</h6>
            </a>
         </div>
         <div class="col l9" id="output">
            <h1 class="center-align">No Data</h1>
         </div>
      </div>
   </div>
</body>
<script>
   document.getElementById('getUsers').addEventListener('click', getUsers);

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


   function getUsers() {
      fetch('https://jsonplaceholder.typicode.com/Users')
         .then((res) => res.json())
         .then((data) => {
            let output =
               '<h4>Users</h4><input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"><table id="myTable">';
            data.forEach(function (user) {
               output +=
                  `
                <tr>
                    <td>${user.id}</td>
                    <td>${user.name}</td>
                </tr>
            `;
            });
            
            output += '</table>'
            document.getElementById('output').innerHTML = output;
         })
   }
</script>
</body>

</html>

推荐阅读