고정 헤더 영역
상세 컨텐츠
본문
- 테이블을 생성하고
- 테이블을 행 x개 단위로 쪼갠 뒤
- 몇개씩 출력되도록 설정합니다
- 표의 cell에 커서를 대면 하이라이트가 생깁니다.
- 인터넷 게시판의 느낌을 생각하시면 됩니다.
↓ ↓ ↓ ↓ ↓ <시작 | 파일명 파일명 : jq7.html > ↓ ↓ ↓ ↓ ↓
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.myhov{
background-color: #00f; color: #fff
}
.page{margin: 5px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("tbody > tr").hover(
function(){
$(this).find("td").addClass("myhov");
},
function(){
$(this).find("td").removeClass("myhov");
}
);
// 페이지 단위 작업
var rows = $("table").find("tbody tr").length;
//alert("행의 개수 : " + rows);
var per_page = 3; // 페이지당 출력 행 수
var no_pages = Math.ceil(rows /per_page);
//alert("전체 페이지 수 : " + no_pages);
pNumbers = $("<div id ='pages'></div>");
for(var i = 0; i< no_pages; i++){
$("<span class='page'>" + (i + 1) + "</span>").appendTo(pNumbers);
}
pNumbers.insertAfter("table");
// 페이지에 링크 걸기
$(".page").hover(
function(){
$(this).addClass("myhov");
},
function(){
$(this).removeClass("myhov");
}
);
$("table").find("tbody tr").hide();
var t = $("table tbody tr");
for(var j = 0; j < per_page; j++){
$(t[j]).show();
}
$("span").click(function(){
$("table").find("tbody tr").hide();
for(var k=($(this).text()- 1)* per_page;
k < ($(this).text() * per_page); k++){
// for(k=(1-1)) * 3; k < (1 * 3); k++)
// for(k=(2-1)) * 3; k < (2 * 3); k++)
$(t[k]).show();
}
});
});
</script>
</head>
<body>
테이블 행 하이라이트<br>
<table border="1">
<thead><tr><th>사번</th><th>이름</th></tr></thead>
<tbody>
<tr><td>1</td><td>tom1</td></tr>
<tr><td>2</td><td>tom2</td></tr>
<tr><td>3</td><td>tom3</td></tr>
<tr><td>4</td><td>tom4</td></tr>
<tr><td>5</td><td>tom5</td></tr>
<tr><td>6</td><td>tom6</td></tr>
<tr><td>7</td><td>tom7</td></tr>
<tr><td>8</td><td>tom8</td></tr>
<tr><td>9</td><td>tom9</td></tr>
<tr><td>10</td><td>tom10</td></tr>
</tbody>
</table>
</body>
</html>
↑ ↑ ↑ ↑ ↑ <종료 | 파일명 파일명 : jq7.html > ↑ ↑ ↑ ↑ ↑
|
[ Console 결과]
|
[Github 안내]
- 해당 예제는 espriter_practice/WebContent/'03_08_jQuery_tutorial2 ' 에 있습니다.
본 포스팅은 IT 교육기관인 KIC 캠퍼스에서 공부하며 작성한 리포트입니다.
혹시 잘못된 내용이 있거나 문제 소지시 댓글 남겨주시면 조치하겠습니다.
'Development > JS' 카테고리의 다른 글
| jQuery - Ajax 전담 메소드를 활용하여 json,xml 읽기 예제 (0) | 2018.02.28 |
|---|---|
| jQuery - Ajax로 자료 읽기 예제 (0) | 2018.02.28 |
| jQuery - jQuery 기본 예제 #8 (0) | 2018.02.27 |
| jQuery - jQuery 기본 예제 #7 (0) | 2018.02.27 |
| jQuery - jQuery 기본 예제 #6 (0) | 2018.02.27 |
| jQuery - jQuery 기본 예제 #5 (0) | 2018.02.27 |
| jQuery - jQuery 기본 예제 #4 (0) | 2018.02.27 |
댓글 영역