0

Quiero que solo me muestre el título de esta tabla y no de todas las que tengo, ya pude hacer el filtrado de la información y si me funciona, pero quiero que me muestre solo el encabezado de esa tabla.

Pongo este ejemplo con 3 tablas para no poner todas mis tablas que son más de 37.

Me gustaría que me pudieran ayudar este problema, ya que yo no se nada de javascript y creo que hay pudiera estar el problema que tengo.

El ejemplo que pongo lo saque de la pagina de w3schools pero hay solo tenían con una tabla, así que yo agregue otras dos para poder presentar mi problema.

Así es como me aparece cuando busco un dato y yo quisiera que solo me apareciera la tabla que tiene dicha información

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container mt-3">
        <h2>Filterable Table</h2>
        <input class="form-control" id="myInput" type="text" placeholder="Search..">
        <br>     
        <table class="table table-bordered">
            <thead>
                    <td  align="center" colspan="6" style="background-color:#E0FAC2; color:#000">Tabla 1</td>
                <tr>
                    <th>Firstname</th><th>Lastname</th><th>Email</th>
                </tr>
            </thead>
            <tbody id="myTable">
                <tr>
                    <td>John</td><td>Doe</td><td>[email protected]</td>
                </tr>
                <tr>
                    <td>Mary</td><td>Moe</td><td>[email protected]</td>
                </tr>
                <tr>
                    <td>July</td><td>Dooley</td><td>[email protected]</td>
                </tr>
                <tr>
                    <td>Anja</td><td>Ravendale</td><td>[email protected]</td>
                </tr>
            </tbody>
        </table>

        <table class="table table-bordered">
            <thead>
                    <td align="center" colspan="6" style="background-color:#E0FAC2; color:#000">Tabla 2</td>
                <tr>
                    <th>Firstname</th><th>Lastname</th><th>Email</th>
                </tr>
            </thead>
            <tbody id="myTable">
                <tr>
                    <td>Eva</td><td>Ross</td><td>[email protected]</td>
                </tr>
                <tr>
                    <td>David</td><td>Jul</td><td>[email protected]</td>
                </tr>
                <tr>
                    <td>Enda</td><td>Dila</td><td>[email protected]</td>
                </tr>
                <tr>
                    <td>Sujew</td><td>Rave</td><td>[email protected]</td>
                </tr>
            </tbody>
        </table>

        <table class="table table-bordered">
            <thead>
                    <td align="center" colspan="6" style="background-color:#E0FAC2; color:#000">Tabla 3</td>
                <tr>
                    <th>Firstname</th><th>Lastname</th><th>Email</th>
                </tr>
            </thead>
            <tbody id="myTable">
                <tr>
                    <td>Jos</td><td>Kevin</td><td>[email protected]</td>
                </tr>
                <tr>
                    <td>Dave</td><td>Kim</idtd><td>[email protected]</td>
                </tr>
                <tr>
                    <td>Rose</td><td>Jim</td><td>[email protected]</td>
                </tr>
                <tr>
                    <td>Wenda</td><td>Roby</td><td>[email protected]</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        $(document).ready(function(){
        $("#myInput").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $("#myTable tr").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
        });
    </script>

</body>

1 respuesta 1

0

Si entiendo bien buscas dejar solo las tablas que si poseen datos luego del filtrado, del contrario puedes tomar el ejemplo y adaptarlo a tus necesidades ya que el criterio de identificación para las tablas que muestran datos está listo.

Manejaremos la visibilidad de las tablas mediante css para dejar solo las tablas que tienen desplegado al menos un tr.

Lo único importante dentro del código es mencionar que al utilizar tr:visible como selector es necesario restablecer la visibilidad de todas las tablas previamente.

 $(document).ready(function(){
        $("#myInput").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $("#myTable tr").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
            $('table').each((index, table) => {
              $(table).css({'display' : 'table'})
            })
            $('table').each((index, table) => {
              if($(table).find('tbody tr:visible').length > 0){
                $(table).css({'display' : 'table'})
              }else{
                $(table).css({'display' : 'none'})
              }
            })
        });
        });
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container mt-3">
        <h2>Filterable Table</h2>
        <input class="form-control" id="myInput" type="text" placeholder="Search..">
        <br>     
        <table class="table table-bordered">
            <thead>
                    <td  align="center" colspan="6" style="background-color:#E0FAC2; color:#000">Tabla 1</td>
                <tr>
                    <th>Firstname</th><th>Lastname</th><th>Email</th>
                </tr>
            </thead>
            <tbody id="myTable">
                <tr>
                    <td>John</td><td>Doe</td><td>[email protected]</td>
                </tr>
                <tr>
                    <td>Mary</td><td>Moe</td><td>[email protected]</td>
                </tr>
                <tr>
                    <td>July</td><td>Dooley</td><td>[email protected]</td>
                </tr>
                <tr>
                    <td>Anja</td><td>Ravendale</td><td>[email protected]</td>
                </tr>
            </tbody>
        </table>

        <table class="table table-bordered">
            <thead>
                    <td align="center" colspan="6" style="background-color:#E0FAC2; color:#000">Tabla 2</td>
                <tr>
                    <th>Firstname</th><th>Lastname</th><th>Email</th>
                </tr>
            </thead>
            <tbody id="myTable">
                <tr>
                    <td>Eva</td><td>Ross</td><td>[email protected]</td>
                </tr>
                <tr>
                    <td>David</td><td>Jul</td><td>[email protected]</td>
                </tr>
                <tr>
                    <td>Enda</td><td>Dila</td><td>[email protected]</td>
                </tr>
                <tr>
                    <td>Sujew</td><td>Rave</td><td>[email protected]</td>
                </tr>
            </tbody>
        </table>

        <table class="table table-bordered">
            <thead>
                    <td align="center" colspan="6" style="background-color:#E0FAC2; color:#000">Tabla 3</td>
                <tr>
                    <th>Firstname</th><th>Lastname</th><th>Email</th>
                </tr>
            </thead>
            <tbody id="myTable">
                <tr>
                    <td>Jos</td><td>Kevin</td><td>[email protected]</td>
                </tr>
                <tr>
                    <td>Dave</td><td>Kim</idtd><td>[email protected]</td>
                </tr>
                <tr>
                    <td>Rose</td><td>Jim</td><td>[email protected]</td>
                </tr>
                <tr>
                    <td>Wenda</td><td>Roby</td><td>[email protected]</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

1
  • Muchas gracias César, me funciono ala perfección, solo cambie el script por lo que tu pusiste y si así es como quería que me funcionara, muchas gracias en verdad. Commented el 15 jul. 2020 a las 23:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.