jquery 플러그인 tablesorter가 html 테이블 사용 예제를 구현하는 방법에 대한 자세한 설명
- 伊谢尔伦원래의
- 2017-07-22 09:56:502593검색
tablesort는 매우 유용한 jQuery 테이블 정렬 플러그인입니다. 여러 데이터 유형의 정렬을 지원하고 테이블 내용의 데이터 유형을 자동으로 식별하므로 사용이 매우 편리합니다.
jQuery tablesort를 사용하여 html 테이블 메서드 구현:
1. jQuery 및 tablesort 스크립트를 다운로드하고 html에서 스크립트 파일을 참조합니다.
<script type="text/javascript" src="../jquery-latest.js"></script> <script type="text/javascript" src="../jquery.tablesorter.js"></script>
2. 정렬해야 하는 html 테이블의 형식을 지정합니다. :
a. 정렬해야 하는 테이블에 대한 CCS 클래스를 지정합니다: class="sort-table"
b 테이블 헤더와 테이블 본문에 thead 및 tbody 태그를 사용합니다. , 테이블 헤더를 정의하려면 th 태그를 사용해야 합니다.
형식이 지정된 html 테이블은 다음과 같습니다.
<table border=1 width="800px" class="sort-table"> <thead> <tr> <th>Date</th> <th>Usage</th> <th>Cost</th> <th>Remain</th> </tr> </thead> <tbody> <tr> <td>2008-3-25</td> <td>book place @dhgu</td> <td>-40</td> <td>-40</td> </tr> <tr> <td>2008-4-1</td> <td>book place @dhgu</td> <td>-40</td> <td>-80</td> </tr> </tbody> </table>3 html 테이블 정렬을 활성화하려면 jQuery 코드를 추가하세요.
본문에서 tablesorter() 함수를 호출합니다. 두 번째 단계에서 지정한 정렬 테이블 CSS 클래스:
<body>
<script type="text/javascript">
$(document).ready(function() {
$(".sort-table").tablesorter();
});
</script>위의 3단계를 통해 jQuery tablesort는 html 테이블을 정렬할 수 있습니다. 위 내용은 jquery 플러그인 tablesorter가 html 테이블 사용 예제를 구현하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.