Skip to main content
se añadieron 37 caracteres en el cuerpo
Origen Enlace
Juan Pinzón
  • 9.3k
  • 20
  • 54
  • 84

Aunque mejor es implementar una herramienta como jquery datatablesjquery datatables que te facilita toda esta tarea.

Aunque mejor es implementar una herramienta como jquery datatables que te facilita toda esta tarea.

Aunque mejor es implementar una herramienta como jquery datatables que te facilita toda esta tarea.

Origen Enlace
Juan Pinzón
  • 9.3k
  • 20
  • 54
  • 84

Te comparto una solucion que existe en SO en Inglés: https://stackoverflow.com/questions/20567426/search-html-table-with-js-and-jquery

Aunque mejor es implementar una herramienta como jquery datatables que te facilita toda esta tarea.

    // captura el evento keyup cuando escribes en el input
    $("#search").keyup(function(){
        _this = this;
        // Muestra los tr que concuerdan con la busqueda, y oculta los demás.
        $.each($("#table tbody tr"), function() {
            if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
               $(this).hide();
            else
               $(this).show();                
        });
    }); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row large-centered">
        
    </div>
    <div class="row large-centered">
        <input type="text" id="search" placeholder="Escribe para buscar..." />
        <table id="table" width="100%">
            <thead>
                <tr>
                    <th>Nombre Personaje</th>
                    <th>Clase</th>
                    <th>Reino</th>
                </tr>
            </thead>
            <tbody>
            <tr>
                <td>Benjamin.</td>
                <td>Rogue.</td>
                <td>Uldum ES.</td>
            </tr>
            <tr>
                <td>Cachoito.</td>
                <td>Hunter.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Contemplario.</td>
                <td>Paladin.</td>
                <td>Uldum ES.</td>
            </tr>
            <tr>
                <td>Elthron.</td>
                <td>Death Knight.</td>
                <td>Agamaggan ES.</td>
            </tr>
            <tr>
                <td>Giloh.</td>
                <td>Priest.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Kitialamok.</td>
                <td>Warrior.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Magustroll.</td>
                <td>Mage.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Marselus.</td>
                <td>Mage.</td>
                <td>Uldum ES.</td>
            </tr>
            <tr>
                <td>Mistrala.</td>
                <td>Warrior.</td>
                <td>Uldum ES.</td>
            </tr>
            <tr>
                <td>Suavemente.</td>
                <td>Warrior.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Tittus.</td>
                <td>Monk.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Yarlokk.</td>
                <td>Warlock.</td>
                <td>Uldum ES.</td>
            </tr>
            </tbody>
        </table>
    </div>