В этой статье мы увидим пример строк таблицы поискового фильтра jquery. здесь мы увидим, как искать данные с помощью фильтра jquery. Много раз у нас есть требования для фильтрации или поиска определенных данных из таблицы HTML. Здесь мы будем использовать метод filter(), который возвращает элементы, соответствующие определенным критериям.
Итак, давайте посмотрим, как искать данные с помощью фильтра jquery, как искать данные с помощью фильтра jquery, фильтровать строки таблицы с помощью jquery, пример строк таблицы фильтра поиска jquery, искать строки таблицы с помощью jquery, строки таблицы поиска jquery.
Пример: пример строк таблицы поискового фильтра Jquery
Здесь мы создадим таблицу и добавим поле поиска.
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style> table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; }
td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; }
tr:nth-child(even) { background-color: #dddddd; } </style> </head> <body>
<h2>Jquery Search Filter Table Rows Example- Techsolutionstuff</h2> <input id="myInput" type="text" placeholder="Search Here.."> <br><br>
<table> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody id="myTable"> <tr> <td>Carry</td> <td>james</td> <td>[email protected]</td> </tr> <tr> <td>Jery</td> <td>joe</td> <td>[email protected]</td> </tr> <tr> <td>Demo</td> <td>roof</td> <td>[email protected]</td> </tr> <tr> <td>Jeff</td> <td>befos</td> <td>[email protected]</td> </tr> </tbody> </table>
</body> <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> </html>
Вам также может понравиться:
- Читайте также: Как отключить правый клик с помощью jQuery
- Читайте также: Автозаполнение поиска Laravel 8 из базы данных
- Читайте также: Как преобразовать HTML в PDF с помощью JavaScript