HTML, CSS 및 jQuery: 검색 기능이 포함된 데이터 테이블 만들기
- WBOY원래의
- 2023-10-26 10:03:291006검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!