I have a very simple CSV file about books, I want to read data from the file to fill my PHP table and search through the table using a javascript function. I'm able to get the PHP table to display how I want. but I can't seem to be able to link it with my javascript, and the table only shows up with filtered letters when you start typing if the input is empty the results don't show.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<?php
$file_to_read = fopen('input .csv', 'r');
if($file_to_read !== FALSE){
echo "<table class=''myTable>\n";
while(($data = fgetcsv($file_to_read, 100, ',')) !== FALSE){
echo "<tr class='header'>";
for($i = 0; $i < count($data); $i++) {
echo "<td class='tableitem'>".$data[$i]."</td>";
}
echo "<tr class='tablerow'>'\n";
}
echo "</table>\n";
fclose($file_to_read);
}
?>
</body>
<script>
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName('td');
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > 0) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</html>
this is my output this is exactly what I want it to look like but it doesn't search or do anything !picture of my output]1
source https://stackoverflow.com/questions/71666865/how-to-add-seach-functionallity-to-php-table-with-vanilla-js
Hello, my name is Muhammad Athar. I'm a 17 year old student. I'm a Web Developer, Designer and Freelancer. 
No comments:
Post a Comment