Código HTML :
<html> <head> <title>Filtro HTML</title> </head> <body> <script language="javascript"> function doSearch() { var tableReg = document.getElementById('regTable'); var searchText = document.getElementById('searchTerm').value.toLowerCase(); for (var i = 1; i < tableReg.rows.length; i++) { var cellsOfRow = tableReg.rows[i].getElementsByTagName('td'); var found = false; for (var j = 0; j < cellsOfRow.length && !found; j++) { var compareWith = cellsOfRow[j].innerHTML.toLowerCase(); if (searchText.length == 0 || (compareWith.indexOf(searchText) > -1)) { found = true; } } if (found) { tableReg.rows[i].style.display = ''; } else { tableReg.rows[i].style.display = 'none'; } } } </script> <input id="searchTerm" type="text" onKeyUp="doSearch()" /> <table id="regTable"> <tr><td></td></tr> <tr><td><a href="1.html">EDUARDO</a></td></tr> <tr><td><a href="2.html">CARLOS</a></td></tr> <tr><td><a href="3.html">PEDRO</a></td></tr> </table> </body> </html>
si se pueba se hace la respectiva busqueda o filtro....
ahora voy a hacerlo dinamico usando PHP y MYSQL para lo cual
Creo una Base de Datos llamada data la cual tiene una tabla llamada datos y se compone asi;
Código :
CREATE TABLE `datos` ( `id` int(150) NOT NULL, `nombre` varchar(150) NOT NULL, `url` varchar(50) NOT NULL );
Ahora bien el codigo de arriba (el HTML) lo ajuste a mis necesidades asi, para que me mostrara los datos de la tabla dinamicamente:
Código PHP :
<html> <head> <title>Filtro PHP MYSQL</title> </head> <body> <script language="javascript"> function doSearch() { var tableReg = document.getElementById('regTable'); var searchText = document.getElementById('searchTerm').value.toLowerCase(); for (var i = 1; i < tableReg.rows.length; i++) { var cellsOfRow = tableReg.rows[i].getElementsByTagName('td'); var found = false; for (var j = 0; j < cellsOfRow.length && !found; j++) { var compareWith = cellsOfRow[j].innerHTML.toLowerCase(); if (searchText.length == 0 || (compareWith.indexOf(searchText) > -1)) { found = true; } } if (found) { tableReg.rows[i].style.display = ''; } else { tableReg.rows[i].style.display = 'none'; } } } </script> <?php $conexion = mysql_connect("localhost","root",""); mysql_select_db("data",$conexion); date_default_timezone_set("America/Bogota"); mysql_query("SET NAMES utf8"); mysql_query("SET CHARACTER_SET utf"); $s='$'; function limpiar($tags){ $tags = strip_tags($tags); return $tags; } $sql = "SELECT * FROM datos ORDER BY id ASC"; $result = mysql_query($sql,$conexion); ?> <input id="searchTerm" type="text" onKeyUp="doSearch()" /> <?php while($row = mysql_fetch_array($result)) { ?> <table id="regTable"> <tr><td></td></tr> <tr><td><a href="<?php echo $row["url"]; ?>"><?php echo strtoupper ($row["nombre"]); ?></a></td></tr> </table> <?php } ?> </body> </html>
Pero al probarlo el filtro o busqueda no me resulta aca como deberia... y como funciona en el codigo de arriba (html) porq ue razon aca en php no resulta que debo agregarle para que este funcione....
espero me puedan ayudar....