Reading CSV file using PHP then create a table then search that table
I am working to read a CSV file then create a table in HTML using that file then with that table I can search using Javascript.
My Code :
$('#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>
<link rel="stylesheet" type="text/css" href=A3.css>
<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>
<thead>
<tr>
<th>Item #</th>
<th>Name</th>
<th>Type</th>
<th>Make</th>
<th>Model</th>
<th>Brand</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>Cut & Blow Dry</td>
<td>Service</td>
<td></td>
<td></td>
<td>Hair by Cass</td>
<td>Haircut and style after</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
$('#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)
})
});
</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';
document.getElementById('lblGreetings').innerHTML =
'<b>' + greet + '</b> and welcome to Encodedna.com!';
</script>
</body>
</html>However I can see the Table, but not matter what I do, the table just stays the same. Unsearchable. Like a block of cement. As in the screenshot below.
The process will be that to import the CSV using PHP into a table, then using the table I can use javascript to search the table.
from Recent Questions - Stack Overflow https://ift.tt/3eTC3I7
https://ift.tt/eA8V8J
Comments
Post a Comment