Codiguillos de JavierB

Filtrar filas en una tabla

Vamos a ver un ejemplo en el que los datos de una tabla se filtran según lo que se vaya escribiendo en un cuadro de texto. Pulsando en la celda del encabezado se puede seleccionar la columna que se va a filtar.


García López	José	55123678
Benito del Río	Pedro	43198265
Gomez Pozo	Josua	55512905
Benitez Sánchez	Andrés	44592718
Rosales Rosales	Antonio	4318742

El código del formulario y de la tabla es el que os pongo a continuación. He utilizado botones en los encabezados para que se puedan pulsar también con el teclado, así son accesibles a los que no dispongan de ratón

<form class="formu" action=''>
<p><label for="fil1">Principio:<input type="radio" name="rad" id="fil1" checked="checked" /></label>
<label for="fil2">Final:<input type="radio" name="rad" id="fil2" /></label>
<label for="fil3">Contiene:<input type="radio" name="rad" id="fil3" /></label>
</p>
</form>
<p> </p>
<table class="tabla" id="tab">
<tr class="encabezado">
<th>
<input type="button" value="Apellidos" onclick="selecciona(this,0)" onkeypress="selecciona(this,0)" />
</th>
<th>
<input type="button" value="Nombre" onclick="selecciona(this,1)" onkeypress="selecciona(this,1)" />
</th>
<th>
<input type="button" value="D.N.I." onclick="selecciona(this,2)" onkeypress="selecciona(this,2)" />
</th>
</tr>
<tr>
<td class="celdasel">García López</td><td>José</td><td>55123678</td>
</tr>
<tr>
<td class="celdasel">Benito del Río</td><td>Pedro</td><td>43198265</td>
</tr>

También podeis ver el código JavaScript para seleccionar la columna y filtrar las filas:

var colum=0; // columna por la que se filtrará
var valor; // value del botón que se ha pulsado

function selecciona(obj,num) {
  t = document.getElementById('tab');
  filas = t.getElementsByTagName('tr');
  // Deseleccionar columna anterior
  for (i=1; ele=filas[i]; i++) 
    ele.getElementsByTagName('td')[colum].className='';
  // Seleccionar columna actual
  colum=num;
  for (i=1; ele=filas[i]; i++)
    ele.getElementsByTagName('td')[colum].className='celdasel';
  // Cambiar botón por cuadro de texto
  valor = obj.value;
  celda = obj.parentNode;
  celda.removeChild(obj);
  txt = document.createElement('input');
  celda.appendChild(txt);
  txt.focus();
  txt.onblur = function() {ponerBoton(this,num)};
  txt.onkeyup = function() {filtra(this.value)};
  // Desactivar los demás botones
  for (i=0; ele=t.getElementsByTagName('input')[i]; i++)
    if (ele.type == 'button') ele.disabled=true;
}

function ponerBoton(obj,num) {
  celda = obj.parentNode;
  celda.removeChild(obj);
  boton = document.createElement('input');
  boton.type = 'button';
  boton.value = valor;
  boton.onclick = function() {selecciona(this,num)}
  boton.onkeypress = function() {selecciona(this,num)}
  celda.appendChild(boton);
  // Activar botones
  for (i=0; ele=t.getElementsByTagName('input')[i]; i++)
    ele.disabled=false;
}

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();
    for (j=0; ra=document.forms[0].rad[j]; j++) // Comprobar radio seleccionado
      if (ra.checked) num = j;
      
    if (num==0) posi = (texto.indexOf(txt.toUpperCase()) == 0);
    else if (num==1) posi = (texto.lastIndexOf(txt.toUpperCase()) == texto.length-txt.length);
    else posi = (texto.indexOf(txt.toUpperCase()) != -1);
    ele.style.display = (posi) ? '' : 'none';
  } 
}

Subir Subir