원생 js 표 펼 치기 및 점프 실현
js 코드 의 rownum 변 수 는 데 이 터 를 표시 하 는 줄 수 입 니 다.수정 하면 각 페이지 에 표 시 된 수량 을 변경 할 수 있 습 니 다.
html 코드:
<table border="" cellspacing="" cellpadding="" id="table">
<thead>
<tr>
<td>No</td>
<td>Name</td>
<td>Age</td>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<td colspan="3">
<input type="button" name="pre-btn" id="pre" value="<" />
<input type="text" name="page_num" id="page_num" value="" />
<span id="cur_page"></span>
<input type="button" name="jump" id="jump" value=" " />
<input type="button" name="next-btn" id="next" value=">" />
</td>
</tr>
</tfoot>
</table>
js 코드:
let datas = [
[1, 'a', 16],
[2, 'b', 20],
[3, 'c', 22],
[4, 'd', 44],
[5, 'e', 11],
[6, 'f', 12],
[7, 'g', 13]
];
let cur_page = 0;
let t = document.querySelector('tbody');
let page_num = document.querySelector('#page_num');
let row_num = 2;
(() => jump_to(cur_page))();
function pre() {
if (cur_page > 0) {
cur_page--;
jump_to(cur_page);
}
}
function next() {
if (cur_page < (datas.length / row_num) - 1) {
cur_page++;
jump_to(cur_page);
}
}
function jump_to(page) {
t.innerHTML = '';
for (let i = page * row_num; i < (page + 1) * row_num && i < datas.length; i++) {
let row = t.insertRow();
for (let item of datas[i]) {
row.insertCell().innerHTML = item;
}
}
page_num.value = page + 1;
}
document.querySelector('#cur_page').innerText = `/${Math.ceil(datas.length / row_num)}`;
document.querySelector('#pre').onclick = () => pre();
document.querySelector('#next').onclick = () => next();
document.querySelector('#jump').onclick = function() {
if (page_num.value < (datas.length / row_num) + 1 && page_num.value - 1 !== cur_page && page_num.value > 0 && Number.isInteger(parseInt(page_num.value))) {
cur_page = page_num.value - 1;
jump_to(cur_page);
}
};
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.