Ver Mensaje Individual
  #4 (permalink)  
Antiguo 28/12/2006, 10:17
Avatar de edu007ar
edu007ar
 
Fecha de Ingreso: septiembre-2003
Ubicación: Buenos Aires
Mensajes: 118
Antigüedad: 21 años, 5 meses
Puntos: 0
Re: buscar filas de una tabla con las teclas

Bueno, les paso como quedó el código de javierB modificado a mi gusto para el trabajo que tenía que hacer.... creo que quedó bastante funcional y rápido de utilizar con el teclado:

Código HTML:
<html>
<head>

<script language="javascript">
var colum=0;
var valor;
function filtra(txt) {
t = document.getElementById('tab');
filas = t.getElementsByTagName('tr');
for (i=1; ele=filas[i]; i++) {
texto = ele.getElementsByTagName('td')[colum].innerHTML.toUpperCase();
posi = (texto.indexOf(txt.toUpperCase()) == 0);
ele.style.display = (posi) ? '' : 'none';
}
}
</script>

<script language="JavaScript">
document.onkeydown = function(){
if(window.event.keyCode == 27){
document.getElementById('txt').value="";
filtra('');
document.getElementById('txt').focus();
return false;
}
}
</script>

</head>

<body>
<table width="200" cellpadding="2" cellspacing="1" bgcolor="#000000" id="tab" style="font-family: tahoma; font-size:11px; ">
<tr bgcolor="#FFFFFF">
<td colspan="3">
  <div align="center">
    Filtrar: 
      <input name="txt" type="text" id="txt" size="10" onKeyUp="filtra(this.value)">
  </div></td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="50%">Alberto</td>
<td width="25%"><div align="center">
  <input name="textfield" type="text" size="2">
</div></td>
<td width="25%"><div align="center">
  <input name="textfield2" type="text" size="2">
</div></td>
</tr>
<tr bgcolor="#FFFFFF">
  <td>Alicia</td>
  <td><div align="center">
    <input name="textfield" type="text" size="2">
  </div></td>
  <td><div align="center">
    <input name="textfield2" type="text" size="2">
  </div></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>Aandres</td>
<td><div align="center">
  <input name="textfield" type="text" size="2">
</div></td>
<td><div align="center">
  <input name="textfield2" type="text" size="2">
</div></td>
</tr>
<tr bgcolor="#FFFFFF">
  <td>Benito</td>
  <td><div align="center">
    <input name="textfield" type="text" size="2">
  </div></td>
  <td><div align="center">
    <input name="textfield2" type="text" size="2">
  </div></td>
</tr>
<tr bgcolor="#FFFFFF">
  <td>Bernardo</td>
  <td><div align="center">
    <input name="textfield" type="text" size="2">
  </div></td>
  <td><div align="center">
    <input name="textfield2" type="text" size="2">
  </div></td>
</tr>
<tr bgcolor="#FFFFFF">
  <td>Edgardo</td>
  <td><div align="center">
    <input name="textfield" type="text" size="2">
  </div></td>
  <td><div align="center">
    <input name="textfield2" type="text" size="2">
  </div></td>
</tr>
<tr bgcolor="#FFFFFF">
  <td>Eduardo</td>
  <td><div align="center">
    <input name="textfield" type="text" size="2">
  </div></td>
  <td><div align="center">
    <input name="textfield2" type="text" size="2">
  </div></td>
</tr>
<tr bgcolor="#FFFFFF">
  <td>Jose</td>
  <td><div align="center">
    <input name="textfield" type="text" size="2">
  </div></td>
  <td><div align="center">
    <input name="textfield2" type="text" size="2">
  </div></td>
</tr>
<tr bgcolor="#FFFFFF">
  <td>Pedro</td>
  <td><div align="center">
    <input name="textfield" type="text" size="2">
  </div></td>
  <td><div align="center">
    <input name="textfield2" type="text" size="2">
  </div></td>
</tr>
<tr bgcolor="#FFFFFF">
  <td>Pepe</td>
  <td><div align="center">
    <input name="textfield" type="text" size="2">
  </div></td>
  <td><div align="center">
    <input name="textfield2" type="text" size="2">
  </div></td>
</tr>
<tr bgcolor="#FFFFFF">
  <td>Santiago</td>
  <td><div align="center">
    <input name="textfield" type="text" size="2">
  </div></td>
  <td><div align="center">
    <input name="textfield2" type="text" size="2">
  </div></td>
</tr>
<tr bgcolor="#FFFFFF">
  <td>Santoro</td>
  <td><div align="center">
    <input name="textfield" type="text" size="2">
  </div></td>
  <td><div align="center">
    <input name="textfield2" type="text" size="2">
  </div></td>
</tr>
<tr bgcolor="#FFFFFF">
  <td>Yolanda</td>
  <td><div align="center">
    <input name="textfield" type="text" size="2">
  </div></td>
  <td><div align="center">
    <input name="textfield2" type="text" size="2">
  </div></td>
</tr>
<tr bgcolor="#FFFFFF">
  <td>Zulema</td>
  <td><div align="center">
    <input name="textfield" type="text" size="2">
  </div></td>
  <td><div align="center">
    <input name="textfield2" type="text" size="2">
  </div></td>
</tr>
</table>
</body>
</html> 
reciclé una función de keycode para poder presionar ESC en cualquier lugar para quitar el filtro y volver al campo de busqueda y seguir escribiendo.... de esta manera se pueden ir ingresando movimientos de cliente sin utilizar el mouse..... y descubrí que presionando ESC luego de escribir un valor en los campos de los clientes NO BORRA LO QUE SE ACABA DE ESCRIBIR!.

de la función original de javierB quité la opcion de busqueda empezando del final y del medio, por lo tanto solo busca al principio de las cadenas que es como yo quería...

Espero que les sirva..

Gracias.
Slds.