HTML, CSS 및 jQuery: 검색 기능이 포함된 데이터 테이블 만들기-JS 튜토리얼-php.cn

HTML, CSS 및 jQuery: 검색 기능이 포함된 데이터 테이블 만들기

WBOY

풀어 주다： 2023-10-26 10:03:29

원래의

960명이 탐색했습니다.

HTML, CSS 및 jQuery: 검색 기능이 포함된 데이터 테이블 만들기

HTML, CSS 및 jQuery: 검색 기능을 사용하여 데이터 테이블 만들기

현대 웹 개발에서 데이터 테이블은 자주 사용되는 요소입니다. 사용자가 데이터를 쉽게 찾고 필터링하기 위해서는 데이터 테이블에 검색 기능을 추가하는 것이 필수 기능이 되었습니다. 이 기사에서는 HTML, CSS 및 jQuery를 사용하여 검색 기능이 있는 데이터 테이블을 만드는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. HTML 구조

먼저, 데이터 테이블과 검색 기능을 수용할 수 있는 기본 HTML 구조를 만들어야 합니다. 샘플 HTML 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
  <title>带有搜索功能的数据表格</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <h1>带有搜索功能的数据表格</h1>
  
  <input type="text" id="search-input" placeholder="输入关键字搜索">
  
  <table id="data-table">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>25</td>
        <td>男</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>30</td>
        <td>女</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>28</td>
        <td>男</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

로그인 후 복사

위 코드는 입력창과 데이터 양식을 생성하며, 입력란은 검색용 키워드를 입력하는 데 사용되며, 데이터 양식의 내용은 간단한 직원 정보 목록입니다.

2. CSS 스타일

다음은 데이터 테이블과 검색창에 스타일을 추가하는 샘플 CSS 파일의 코드입니다.

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
}

h1 {
  text-align: center;
}

#search-input {
  width: 300px;
  height: 30px;
  font-size: 16px;
  margin-bottom: 20px;
  padding: 5px;
}

#data-table {
  width: 100%;
  border-collapse: collapse;
}

#data-table th, #data-table td {
  border: 1px solid #ccc;
  padding: 8px;
}

#data-table th {
  text-align: left;
}

#data-table tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

#data-table tbody tr:hover {
  background-color: #ddd;
}

로그인 후 복사

3. jQuery 스크립트

마지막으로 jQuery를 사용하여 구현하는 간단한 스크립트를 작성합니다. 검색 기능 . 코드는 다음과 같습니다.

$(document).ready(function() {
  $("#search-input").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#data-table tbody tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

로그인 후 복사

위 코드는 입력 상자의 키보드 입력 이벤트를 모니터링합니다. 내용이 입력될 때마다 테이블 행은 키워드를 기준으로 필터링되어 해당 키워드가 포함된 행만 표시됩니다. .

지금까지 검색 기능이 포함된 데이터 테이블 생성이 완료되었습니다! 사용자가 입력창에 키워드를 입력하면 해당 키워드가 포함된 행만 표시됩니다.

요약하자면, 이 글은 HTML, CSS, jQuery의 조합을 통해 검색 기능이 있는 데이터 테이블을 생성하는 방법을 보여줍니다. 이 예를 통해 우리는 웹 페이지에 다양한 대화형 효과를 쉽게 추가할 수 있는 HTML, CSS 및 jQuery의 힘을 확인할 수 있습니다. 이 기사가 웹 페이지를 개발할 때 도움이 되기를 바랍니다!

위 내용은 HTML, CSS 및 jQuery: 검색 기능이 포함된 데이터 테이블 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!