>웹 프론트엔드 >JS 튜토리얼 >자바스크립트 테이블 정렬 및 헤더 플로팅 효과(확장 SortTable)_javascript 기술

자바스크립트 테이블 정렬 및 헤더 플로팅 효과(확장 SortTable)_javascript 기술

WBOY
WBOY원래의
2016-05-16 18:54:321351검색

1. SortTable 지침
SortTable
버전 2
2007년 4월 7일
Stuart Langridge, http://www.kryogenix.org/code/browser/sorttable/

지침:
이 파일을 다운로드하세요
HTML에
를 추가하세요
정렬할 테이블에 class="sortable"을 추가하세요
정렬하려면 헤더를 클릭하세요

감사합니다
X11 라이센스: http://www.kryogenix.org/code/browser/licence.html
이는 기본적으로 원하는 대로 수행한다는 의미입니다.

사용법:
과 같이 정렬할 테이블에 CSS를 추가합니다.


2. 업데이트 지침

업데이트:
버전 2.1
2009년 3월 9일
Hopesoft, http:/ /www.51ajax.com/blog/

지침:
1. 중국어 정렬 추가
2. 각 행에 대해 서로 다른 CSS 스타일을 지정하는 기능을 추가합니다(예: 홀수 및 짝수 행)
기본적으로 정렬 기능이 모든 열에 추가됩니다. 정렬이 필요 없는 열에는 CSS를 추가하면 됩니다. : "sorttable_nosort"(예:
사용법:

과 같이 헤더가 플로팅될 테이블에 속성을 추가합니다. 3. 헤더 플로팅 기능 추가(같은 페이지에 여러 테이블 지원, 다른 탭 아래에 있는 테이블 지원) labels)
사용법:

과 같이 헤더를 플로팅하려는 테이블에 CSS를 추가합니다. 또한 "헤더"와 "데이터"의 각 열의 열 너비를 지정하는 것이 가장 좋습니다. 행", 예: 이름나이
Zhang San21

FireFox에서 테이블 헤더가 떠 있을 때 테이블 헤더 열과 데이터 열 사이의 정렬 오류를 방지하려면
4. 페이지 로딩 후 자동 정렬 추가
사용법: 자동으로 정렬될 열 번호에 해당하는 테이블입니다.
예를 들어
는 페이지가 성공적으로 로드되면 자동으로 추가되는
4번째 줄은 중국어로 주석 처리되어 원본 코드의 일부를 차단합니다. 게다가 원래 코드의 오름차순과 내림차순 ms가 반전되어 있어서 여기서 변경했습니다.
데모 주소http://img.jb51.net/online/sorttable/sorttable.htm
패키지 다운로드 주소: http://img.jb51.net/online/ sorttable/sorttable.rar
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.