我正在阅读一个 CSV 文件，然后使用该文件在 HTML 中创建一个表，然后我可以使用 Javascript 搜索该表。
我的代码：
$('#searchin').bind('input', function() {
document.getElementById("list").style.display="none";
document.getElementById("btngo").disabled=true;
if ($(this).val() != "") {
var list = document.getElementById("list").childNodes;
for (var i=0;i<list.length;i++) {
var values = list[i].innerHTML;
if(values){
list[i].style.display="none";
if (values.toLowerCase().includes($(this).val().toLowerCase()) == 1) {
document.getElementById("list").style.display="block";
list[i].style.display="block";
}
else {
list[i].style.display="none";
}
}
}
}
});
$("#list tr").click(function() {
document.getElementById("searchin").value=this.outerText;
document.getElementById("list").style.display="none";
document.getElementById("btngo").disabled=false;
var link = $(this).attr("href");
document.getElementById("btngo").addEventListener("click", function(){
window.open(link,'_self',false)
})
});<!DOCTYPE html>
<html lang="en">
<head>
<style>
.hidden {
display: none;
}
</style>
<title>Index Page</title>
<meta charset="UTF-8">
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<label id="lblGreetings"></label>
<div class="navbar">
<a class="active" href="index.html"><i class="fa fa-fw fa-home"></i> Home</a>
<div class="dropdown">
<button class="dropbtn">Products
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="currency.php">Currency Exchange</a>
<a href="#">Service 2</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Contact Us
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#"><img alt="France Flag" src="french.png" width="20" height="20">Contactez-nous</a>
<a href="#"><img alt="Egypt Flag" src="egypt.png" width="20" height="20">اتصل بنا</a>
</div>
</div>
<a href="about.html"><i class="fa fa-fw fa-address-card"></i> About Us</a>
</div>
<p>The purpose of this site is to provide protective services and outline the powers of our super heroes and super villians</p>
<div id="search">
<div id="container1">
<input type="text" id="searchin" placeholder="Seacrh..."/>
<button id="btngo" class="btn btn-primary" type="button" disabled>Go</button>
</div>
<div id="container2">
<table border="1" id="list"><tr><td>Item #</td><td>Name</td><td>Type</td><td>Make</td><td>Model</td><td>Brand</td><td>Description</td></tr><tr><td>100</td><td>Service One</td><td>Service</td><td>Casio</td><td>2020</td><td>Programming Consultation</td><td>1 hour of consulting on web design concepts</td></tr><tr><td>101</td><td>Service Two</td><td>Service</td><td>Casio</td><td>2020</td><td>Programming Consultation</td><td>5 hours of consulting on web design concepts</td></tr><tr><td>102</td><td>ProgCalc</td><td>Product</td><td>Casio</td><td>2020</td><td>Prgramming</td><td>Programmable calculator</td></tr><tr><td>103</td><td>ProgBook</td><td>Book</td><td>Casio</td><td>2020</td><td>O'Reilly</td><td>A book on web design concepts</td></tr><tr><td>104</td><td>Batman</td><td>Magazine</td><td>Casio</td><td>2020</td><td>Marval</td><td>Comic book about batman</td></tr><tr><td>105</td><td>Joker</td><td>Magazine</td><td>Casio</td><td>2020</td><td>Marval</td><td>Comic book about Joker</td></tr><tr><td>106</td><td>Lux</td><td>Magazine</td><td>Casio</td><td>2020</td><td>Marval</td><td>Comic book about Lux</td></tr><tr><td>107</td><td>Superman</td><td>Magazine</td><td>Casio</td><td>2020</td><td>Marval</td><td>Comic book about Superman</td></tr><tr><td>108</td><td>Teen Titans</td><td>Magazine</td><td>Casio</td><td>2020</td><td>Marval</td><td>Comic book about Teen Titans</td></tr><tr><td>109</td><td>Scarecrow</td><td>Magazine</td><td>Casio</td><td>2020</td><td>Marval</td><td>Comic book about Scarecrow</td></tr><tr><td>110</td><td>Bain</td><td>Magazine</td><td>Casio</td><td>2020</td><td>Marval</td><td>Comic book about Bain</td></tr><tr><td>111</td><td>Heliocopter </td><td>Machinery</td><td>Casio</td><td>2020</td><td>Marval</td><td>Heliocopter </td></tr><tr><td>112</td><td>Bat Mobile</td><td>Machinery</td><td>Casio</td><td>2020</td><td>Marval</td><td>The one and only bat mobile</td></tr><tr><td>113</td><td>Bat Jet</td><td>Machinery</td><td>Casio</td><td>2020</td><td>Marval</td><td>Jet for travelling across seas</td></tr></table>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#searchin').on('input', function() {
let val = $(this).val().trim().toLowerCase()
if (val === '') $('#list tr:not(:first-child)').removeClass('hidden');
else $('#list tr:not(:first-child)').addClass('hidden');
$('#list tr:not(:first-child) td').each(function() {
if ($(this).text().toLowerCase().includes(val)) $(this).closest('tr').removeClass('hidden')
});
});
</script>
<script>
var myDate = new Date();
var hrs = myDate.getHours();
var greet;
if (hrs < 6 && hrs <= 24)
greet = 'Good Morning, you must be an early bird';
else if (hrs < 12 && hrs >= 6)
greet = 'Good Morning';
else if (hrs >= 12 && hrs <= 18)
greet = 'Good Afternoon';
else if (hrs > 18 && hrs < 24)
greet = 'Good Evening';
</script>
</body>
</html>但是我可以看到表格，但无论我做什么，表格都保持不变。无法搜索。就像一块水泥。如下图所示。
该过程将是使用 PHP 将 CSV 导入表中，然后使用该表我可以使用 javascript 来搜索该表。
