jquery 테이블 페이징 및 기타 작업 구현 코드(pagedown, pageup)_jquery

기술적인 내용은 없습니다. 그림부터 시작하겠습니다.
아이디어:
1: 버튼 가져오기
2: 현재 테이블 행의 위치 결정

HTML 구조:

코드 복사 코드는 다음과 같습니다.

이름:
성:
연령:%: 🎜>

;/td>


/>
44%




스타일 스타일:




코드 복사

코드는 다음과 같습니다:
body{

font-family: "Microsoft Yahei" font -size:12px; 테이블{ text-align:center; } 번째{ height:30px;

border-bottom:1px dashed ;

}
td{
높이:30px;
테두리 하단:1px 점선
}
.bak{
배경색: #ebebeb; 🎜>}



js 코드:





코드 복사


코드는 다음과 같습니다. 다음과 같습니다:

$(document).ready(function(){ $("#sure").click(function(){
var fval=$("# firstname").val();

var lval=$("#lastname").val(); var age=$("#age").val() ; var퍼센트= $("#percent").val(); //테이블 작성var str='

'; $("table").append(str) str="" })

//설정 초기 tr 번호
var logo=0;
$(document).keydown(function(e){
var table=$("table tr");
//pagedown을 누른 경우
if(e.keyCode==40){
//모든 tr ​​스타일 제거
$("tr.bak").removeClass("bak ")//강조 표시 현재 tr
$("tr:eq(" logo ")").addClass("bak")
//tr 일련번호 1
logo 추가; //tr 시퀀스 번호가 tr의 길이를 초과하면 첫 번째 줄을 반환합니다.
if(logo>table.length){
logo=0;
if(e.keyCode==38){
//tr 일련번호가 현재 일련번호에서 1씩 감소하여 한 단계 위로 이동합니다.
var l =logo-1;
//tr 일련번호가 0보다 작은 경우, 즉 이때의 tr 일련번호가 맨 아래에 있어야 합니다.
if(ll=table.length l; ;//tr 시퀀스 번호 계산 재설정
}
$("tr.bak").removeClass("bak")
$("tr:eq(" l ")").addClass( "bak");
logo=l;//현재 tr 일련번호를 식별하기 위해 로고 할당
}
})
})


여기 jquery로 구현된 테이블 페이징 코드 다음은 권장되는 몇 가지 다른 테이블 페이징 구현 방법입니다.

js 테이블 페이징 구현 코드



TinyTable javascript 테이블 페이징 및 정렬 플러그인

	피터	파커	28	20.9%			John	33	25%
	클라크
< ;td>' '	' '	' ;' 퍼센트 '