jquery 플러그인 tablesorter가 html 테이블 사용 예제를 구현하는 방법에 대한 자세한 설명-JS 튜토리얼-php.cn

jquery 플러그인 tablesorter가 html 테이블 사용 예제를 구현하는 방법에 대한 자세한 설명

伊谢尔伦

풀어 주다： 2017-07-22 09:56:50

원래의

2594명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!