Jquery 검색 필터 테이블 행 예

이 기사에서는 jquery 검색 필터 테이블 행 예제를 볼 것입니다. 여기에서는 jquery 필터를 사용하여 데이터를 검색하는 방법을 살펴보겠습니다. HTML 테이블에서 특정 데이터를 필터링하거나 찾아야 하는 요구 사항이 있는 경우가 많습니다. 여기에서 filter() 메서드를 사용하여 특정 기준과 일치하는 요소를 반환합니다.

그럼 jquery 필터를 이용한 데이터 검색 방법, jquery 필터를 이용한 데이터 검색 방법, jquery를 이용한 테이블 행 필터링, jquery 검색 필터 테이블 행 예제, jquery를 이용한 테이블 행 검색, jquery 검색 테이블 행에 대해 알아보도록 하겠습니다.

Example: Jquery Search Filter Table Rows Example



여기에서는 테이블을 만들고 검색 상자를 추가합니다.

<!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>



당신은 또한 좋아할 수 있습니다:
  • Read Also: How To Disable Right Click Using jQuery
  • Read Also: Laravel 8 Autocomplete Search from Database
  • Read Also: How To Convert HTML To PDF Using JavaScript
  • 좋은 웹페이지 즐겨찾기