집 > 기사 > 웹 프론트엔드 > jquery 테이블 페이징 및 기타 작업 구현 코드(pagedown, pageup)_jquery

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

WBOY원래의: 2016-05-16 18:29:551630검색

기술적인 내용은 없습니다. 그림부터 시작하겠습니다.
아이디어:
1: 버튼 가져오기
2: 현재 테이블 행의 위치 결정
jquery 테이블 페이징 및 기타 작업 구현 코드(pagedown, pageup)_jquery
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(l<0){ 
l=table.length l; ;//tr 시퀀스 번호 계산 재설정
} 
$("tr.bak").removeClass("bak") 
$("tr:eq(" l ")").addClass( "bak"); 
logo=l;//현재 tr 일련번호를 식별하기 위해 로고 할당 
} 
}) 
}) 


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

js 테이블 페이징 구현 코드



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

성명：

이전 기사：jquery.AutoComplete.js 중국어 개정 버전(firefox 지원)_jquery다음 기사：jquery.AutoComplete.js 중국어 개정 버전(firefox 지원)_jquery

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

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

관련 기사