HTML y JavaScript
$("#btn10").click(function() { $(".search-boxes").toggle() }), $("#comfilter").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#communication_mode_table tr").each(function(index) { if (index !== 1) { $row = $(this); var id = $row.find("td:first").text().toLowerCase(); if (id.indexOf(value) == -1) { $row.hide(); } else { $row.show(); } } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="btn10"><i class="fa fa-filter"></i> Filter</button> <table id="communication_mode_table" class="table table-bordered table-hover"> <thead> <tr> <th>Nature Of Fault</th> <th>Push Notification <input type='checkbox' name='all_push' id='all_push' class='all_push' </th> <th>SMS <input type='checkbox' name='all_sms' id='all_sms' class='all_sms' /> </th> <th>Call <input type='checkbox' name='all_call' id='all_call' class='all_call' /> </th> <th>Email <input type='checkbox' name='all_email' id='all_email' class='all_email' /> </th> </tr> <tr class="search-boxes " style="display: none;"> <th> <input id="comfilter" type="text" class="form-control" /> </th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> <tbody> </tbody> </table>¿Por qué el encabezado de mi tabla desaparece al teclear el cuadro de búsqueda?
También si pongo
if(index !== 0) , el cuadro de búsqueda desaparece de la pantalla. ¿Alguien puede ayudarme a encontrar la solución?
¿Hay alguna solución alternativa disponible para lograr este filtro?
parece que tu código está mal.
el cuerpo de su tabla está vacío y realiza una búsqueda en su encabezado. así que intente reorganizar su código, coloque su valor de identificación #communication_mode_table en el contenido de la etiqueta del cuerpo de la tabla en lugar de su encabezado.
El problema es que filtra todas las filas, cuando claramente desea filtrar solo las filas en tbody . Deberá ajustar el selector que utiliza y luego tampoco necesitará criterios index .
$("#btn10").click(function() { $(".search-boxes").toggle() }), $("#comfilter").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#communication_mode_table tbody tr").each(function(index) { $row = $(this); var id = $row.find("td:first").text().toLowerCase(); if (id.indexOf(value) == -1) { $row.hide(); } else { $row.show(); } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="btn10"><i class="fa fa-filter"></i> Filter</button> <table id="communication_mode_table" class="table table-bordered table-hover"> <thead> <tr> <th>Nature Of Fault</th> <th>Push Notification <input type='checkbox' name='all_push' id='all_push' class='all_push' </th> <th>SMS <input type='checkbox' name='all_sms' id='all_sms' class='all_sms' /> </th> <th>Call <input type='checkbox' name='all_call' id='all_call' class='all_call' /> </th> <th>Email <input type='checkbox' name='all_email' id='all_email' class='all_email' /> </th> </tr> <tr class="search-boxes " style="display: none;"> <th> <input id="comfilter" type="text" class="form-control" /> </th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> <tr><td>12</td><td>34</td><td>56</td><td>78</td><td>90</td></tr> <tbody> </tbody> </table>