Estoy tratando de buscar en la tabla html usando jquery, y de los ejemplos vistos en Internet logré que funcione, pero me gustaría hacer una búsqueda más avanzada.
Quiero que la búsqueda incluya también la siguiente fila de la fila coincidente (independientemente de si hay alguna coincidencia allí), ¿cómo podría lograr esto?
Tengo este HTML en este momento:
$("#myInput").on("keyup", function () { var value = $(this).val().toLowerCase(); $("tbody tr").filter(function () { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p> <input id="myInput" type="text" placeholder="Search.."> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </p> <table> <thead> <tr> <th style='text-align:left;'>Item</th> </tr> </thead> <tbody> <tr> <td>Porsche</td> </tr> <tr> <td>Joe</td> </tr> <tr> <td>Ferrari</td> </tr> <tr> <td>John</td> </tr> <tr> <td>Lada</td> </tr> <tr> <td>Vladimir</td> </tr> </tbody> </table> </body> </html>Entonces, el objetivo sería incluir siempre +1 fila en la fila coincidente, por ejemplo, si buscara Ferrari, me gustaría que mostrara la fila Ferrari y la fila John.
$("#myInput").on("keyup", function () { var value = $(this).val().toLowerCase(); $("tbody tr").filter(function () { if ($(this).text().toLowerCase().indexOf(value) > -1) { $(this).addClass("filteredNode"); } else { $(this).removeClass("filteredNode"); } $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); .filteredNode + tr { display: table-row !important; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> </style> </head> <body> <p> <input id="myInput" type="text" placeholder="Search.."> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </p> <table> <thead> <tr> <th style='text-align:left;'>Item</th> </tr> </thead> <tbody> <tr> <td>Porsche</td> </tr> <tr> <td>Joe</td> </tr> <tr> <td>Ferrari</td> </tr> <tr> <td>John</td> </tr> <tr> <td>Lada</td> </tr> <tr> <td>Vladimir</td> </tr> </tbody> </table> </body> </html>