Buscador dinamico en tablas

En tu archivo de estilos .css agregar la clase:

.inactive{
    display: none !important;
  }

En tu archivo .html agregar un input de tipo texto y una tabla con datos:

<input class="form-control mt-2 mb-2  search_tables"   data-table="table-users"type="text"/>

Para el imput se requiere dos cosas importantes un selector de tipo clase que nos permita identificar al input y un identificador para asociar a una tabla
.search_table : clase que identifica al input
data-table= guarda el selector de la tabla al cual se buscar esta asociado el input para ralizar la busqueda

E****jemplo de tabla estatica(la tabla puede llenarse dinamicamente desde una base de datos) con datos:

<input class="form-control mt-2 mb-2  search_tables"   data-table="table-users"   type="text"/>
 <tableclass="table"><thead><tr><thscope="col">Id</th><thscope="col">Nombre</th><thscope="col">Correo</th><thscope="col">Teléfono</th></tr></thead><tbodyid="table-users"><trclass=""><tdscope="row">1</td><td>Josue Rodrigo Martin Canto</td><td>[email protected]</td><td>9993574286</td></tr><trclass=""><tdscope="row">2</td><td>Karina Vallegos Canche</td><td>[email protected]</td><td>9994656730</td></tr><trclass=""><tdscope="row">3</td><td>Gloria Dzul Villegas</td><td>[email protected]</td><td>9990507097</td></tr></tbody></table>

El selector de tipo id del tbody debe ser igual al data-table del input

Ejemplo del resultado con bootstrap :

En el archivo javascript .js

Primero se seleccionan todos los inputs (esto se hace de esta forma por si hay mas de un input en un html)

const allInputSeach =document.querySelectorAll('.search_tables');

Se crea un método al cual se asignara a cada input

functionsearchDateTable (){
    //obtener el id de la tabla a la cual estara asociadalet Id='#'+this.getAttribute('data-table');

    //obtener el elemento body de la tabla asociadaconst table_tbody = document.querySelector(Id);

    //obtener todas fila la tablaconst rowsTables=table_tbody.querySelectorAll('tr');
    
    //valida que el input no este vacio, de modo que si esta vacion no perder tiempo en intentar buscar el dato en la filaif(this.value=="" && estado == false){
        return;
    }
    //Recorremos cada fila tabla tabla asociada
     rowsTables.forEach(element => {
        //iniciamos ocultando cada fila asignadole la clase inactive
        element.classList.add(class_hidden);

        //validad que si el input no esta vacioif(this.value !=""){
            // obteners todo la información de la fila en mayusculasconst textRow= element.innerText.toUpperCase();
            //obtener lo que el usario tecleo en el input  convertido en mayusculaslet valueInput=this.value.toUpperCase();
            //validamos silo que esta escrito en el input existe en la fila if(textRow.indexOf(valueInput) > -1){
                //si existe eliminamos la clase inactive para mostrar la fila
                element.classList.remove(class_hidden);
            }
            estado = true;
        }else{
            //si esta vacio se elimina la clase inactive para mostrar la fila
            element.classList.remove(class_hidden);
            estado= false;
        }
     
    }); 
}

Asignar a cada input un evento de tipo keyup asociado al método searchDateTable:

allInputSeach.forEach(element => {
    element.addEventListener('keyup',searchDateTable);
});

¿Por qué internamente se hace una conversión de la infomación antes de comparar si el texto existe en la tabla?
Para no tener sensibilidad entre mayúsculas y minúsculas en los datos a comparar y tener resultado más eficiente sin importar como esta escrito.
¿Por qué no se muestra el texto de la fila en mayúsculas?
unicamente se convierte la información a mayúsculas internamente para su comparación, nose modifica el texto de la fila.

Pruebas de funcionalidad:
Resultado de una busqueda