欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生js實現(xiàn)表格翻頁和跳轉(zhuǎn)

 更新時間：2020年09月29日 16:48:46   作者：知我未夠好丶  
這篇文章主要為大家詳細介紹了原生js實現(xiàn)表格翻頁和跳轉(zhuǎn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)表格翻頁和跳轉(zhuǎn)的具體代碼，供大家參考，具體內(nèi)容如下

js代碼里的row_num變量是顯示數(shù)據(jù)的行數(shù)，修改后可改變每頁顯示的數(shù)量。

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="跳轉(zhuǎn)" />
  <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);
 }
};

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論