Tengo un archivo CSV muy simple sobre libros, quiero leer datos del archivo para llenar mi tabla de PHP y buscar en la tabla usando una función de javascript. Puedo hacer que la tabla PHP se muestre como quiero. pero parece que no puedo vincularlo con mi javascript, y la tabla solo aparece con letras filtradas cuando comienza a escribir si la entrada está vacía, los resultados no se muestran.
<!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>esta es mi salida esto es exactamente como quiero que se vea pero no busca ni hace nada ! imagen de mi salida ] 1
