无法从 html 表中搜索获取的数据

Question

I have some code (as below) HTML and JavaScript .我有一些代码（如下） HTML 和 JavaScript 。 Actually, I've already fetched some of data from a covid-19 API and also i kept those information on HTML table .实际上，我已经从 covid-19 API 获取了一些数据，并且我将这些信息保存在 HTML table 上。 So, now i wanna search info from the HTML table with country name.所以，现在我想从带有国家/地区名称的 HTML 表中搜索信息。 But, I couldn't that.但是，我不能那样。 So, please some one help me to solve this problem .所以，请有人帮我解决这个问题。

 fetch('https://api.covid19api.com/summary') .then(response => response.json()) .then(data => { var tbody = document.querySelector('#tbody'); tbody.innerHTML = ` <tr> <td>${data.Global.NewConfirmed}</td> <td>${data.Global.TotalConfirmed}</td> <td>${data.Global.TotalDeaths}</td> <td>${data.Global.TotalRecovered}</td> </tr> ` var all_covid_data = document.querySelector('#all_covid_data') var countries = data.Countries ; for(var i =1;i<countries.length ; i++){ all_covid_data.innerHTML += ` <tr> <td class='bg-primary text-light '>${countries[i].Country}</td> <td>${countries[i].NewConfirmed}</td> <td>${countries[i].NewDeaths}</td> <td>${countries[i].NewRecovered}</td> <td>${countries[i].TotalConfirmed }</td> <td>${countries[i].TotalRecovered}</td> <td>${countries[i].TotalDeaths}</td> </tr>`; } }) .catch(err => console.log(err)) // searching or filtering data from table var tableRow = document.getElementById('all_covid_data'); var inputField = document.getElementById('searchBox');

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="./style.css"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <title>Covid-19 Info</title> </head> <body> <div class="container"> <div class="row"> <div class="col-md-2"></div> <div class="col-md-8 py-3"> <h2 class="text-uppercase text-center">Covid-19 Informations</h2> <hr style="width: 110px; text-align: center; border-width: 3px; border-color:#17A2B8"> <table class="table"> <thead class="bg-info text-light"> <tr> <th>NewConfirmed</th> <th>TotalCases</th> <th>TotalDeaths</th> <th>TotalRecovered</th> </tr> </thead> <tbody class="bg-dark text-light" id='tbody'> </tbody> </table> </div> <div class="col-md-2"></div> </div> <section id="countries_data" class="py-4"> <div class="row"> <div class="col-12"> <div class="d-flex"> <input type="text" name="" placeholder="Search here" id="searchBox" class="form-control"> <button class="btn ml-2 btn-info">Search</button> </div> </div> </div> <div class="table-responsive"> <table class="table table-bordered table-striped my-4 table-hover"> <thead class="bg-info text-light"> <tr> <th>Countries</th> <th>NewConfirmed</th> <th>NewDeaths</th> <th>NewRecovered</th> <th>TotalConfirmed</th> <th>TotalRecovered</th> <th>TotalDeaths</th> </tr> </thead> <tbody id='all_covid_data'> </tbody> </table> </div> </section> </div> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script src="./app.js"></script> </body> </html>

Answer 1

Create separate methods, one to fetch data from API & another to populate the table.创建单独的方法，一个从 API 获取数据，另一个用于填充表。
Simply use filter() method to filter Country by name and re-use the populateTable() method.只需使用filter()方法按名称过滤 Country 并重新使用populateTable()方法。
Start the for loop from 0 .从0开始for循环。

 $(document).ready(function() { var summary; fetch('https://api.covid19api.com/summary') .then(response => response.json()) .then(data => { summary = data; populateTable(data); }) .catch(err => console.log(err)) function populateTable(data) { var tbody = document.querySelector('#tbody'); tbody.innerHTML = ` <tr> <td>${data.Global.NewConfirmed}</td> <td>${data.Global.TotalConfirmed}</td> <td>${data.Global.TotalDeaths}</td> <td>${data.Global.TotalRecovered}</td> </tr> `; var countries = data.Countries; let content = ''; for (var i = 0; i < countries.length; i++) { content += `<tr> <td class='bg-primary text-light '>${countries[i].Country}</td> <td>${countries[i].NewConfirmed}</td> <td>${countries[i].NewDeaths}</td> <td>${countries[i].NewRecovered}</td> <td>${countries[i].TotalConfirmed }</td> <td>${countries[i].TotalRecovered}</td> <td>${countries[i].TotalDeaths}</td> </tr>`; } $('#all_covid_data').html(content); } // searching or filtering data from table var tableRow = document.getElementById('all_covid_data'); var inputField = document.getElementById('searchBox'); $("#search_btn").click(() => { var filteredData = JSON.parse(JSON.stringify(summary)); filteredData.Countries = filteredData.Countries.filter(c => c.Country.toLowerCase().includes(inputField.value.toLowerCase())); if (filteredData.Countries.length > 0) { $('#all_covid_data').html(''); populateTable(filteredData); } else { alert('Country not found'); } }); });

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="./style.css"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <title>Covid-19 Info</title> </head> <body> <div class="container"> <div class="row"> <div class="col-md-2"></div> <div class="col-md-8 py-3"> <h2 class="text-uppercase text-center">Covid-19 Informations</h2> <hr style="width: 110px; text-align: center; border-width: 3px; border-color:#17A2B8"> <table class="table"> <thead class="bg-info text-light"> <tr> <th>NewConfirmed</th> <th>TotalCases</th> <th>TotalDeaths</th> <th>TotalRecovered</th> </tr> </thead> <tbody class="bg-dark text-light" id='tbody'> </tbody> </table> </div> <div class="col-md-2"></div> </div> <section id="countries_data" class="py-4"> <div class="row"> <div class="col-12"> <div class="d-flex"> <input type="text" name="" placeholder="Search here" id="searchBox" class="form-control"> <button class="btn ml-2 btn-info" id="search_btn">Search</button> </div> </div> </div> <div class="table-responsive"> <table class="table table-bordered table-striped my-4 table-hover"> <thead class="bg-info text-light"> <tr> <th>Countries</th> <th>NewConfirmed</th> <th>NewDeaths</th> <th>NewRecovered</th> <th>TotalConfirmed</th> <th>TotalRecovered</th> <th>TotalDeaths</th> </tr> </thead> <tbody id='all_covid_data'> </tbody> </table> </div> </section> </div> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script src="./app.js"></script> </body> </html>

无法从 html 表中搜索获取的数据

问题描述

1 个解决方案

解决方案1
0 2020-11-23 15:48:16

无法从 html 表中搜索获取的数据

问题描述

1 个解决方案

解决方案1 0 2020-11-23 15:48:16

解决方案1
0 2020-11-23 15:48:16