純JS+HTML+CSS實現表格增刪改查翻頁--模板文件管理

效果

效果

話不多說，直接看效果，本次代碼較爲複雜，希望大家可以耐心閱讀，不懂的可以評論或者郵箱聯繫我（[email protected]）。
完整代碼也可以在我的GitHub中找到，GitHub鏈接在此

頁面

增

點擊新增模板文件，跳轉到如下 模板文件管理列表 頁面，輸入內容，點擊提交，回到初始頁面，並將內容寫入表格中，效果如下

當增加數據條數超過初始頁面選擇的顯示條數，再次增加，在第一頁時，不再繼續顯示，點擊下一頁，再增加，可繼續顯示內容，效果如下

刪

點擊刪除，刪除當前行，並且後面的行會自動補上去，效果如下

改

翻頁

點擊>，跳轉到下一頁；點擊<，跳轉到上一頁，效果如下

當在首頁時，點擊<，出現提示，效果如下

當在尾頁時，點擊>，出現提示，效果如下

頁面顯示條數

點擊10條/頁，選擇其他條數，回到首頁，並且展示相應的條數，效果如下

查找

查找有三個可供選擇的查找元素，當選擇 模板名稱 時，以 模板名稱 爲目標進行選擇；當選擇 模板標題 時，以 模板標題 爲目標進行選擇；同理，當選擇鏈接時，以鏈接爲目標進行選擇，效果如下

跳頁

在 前往頁 輸入頁數，跳轉到相應的頁面，當超過總頁數會有錯誤提示，效果如下

代碼

在此處只展示 JavaScript 代碼，完整代碼可在我的GitHub中自行提取，GitHub鏈接在此

// 打開新增模板
function addTmplFile() {
    // 將主頁面隱身
    var total1 = document.getElementById("total1").style;
    total1.display = "none";
    // 將添加信息頁面顯示
    var total2 = document.getElementById("total2").style;
    total2.display = "block";

    // 顯示提交1按鈕，隱藏提交2按鈕
    document.getElementById("submit1").style.display = "block";
    document.getElementById("submit2").style.display = "none";

    // 將input中的值變爲空
    document.getElementById("name").value = null;
    document.getElementById("id").value = null;
    document.getElementById("title").value = null;
    document.getElementById("address").value = null;
    document.getElementById("remarks").value = null;
}

// 提交1
function submit1() {
    // 獲取輸入的值（即input中的value值）
    var name = document.getElementById("name").value;
    var onlyId = document.getElementById("id").value;
    var title = document.getElementById("title").value;
    var address = document.getElementById("address").value;
    var remarks = document.getElementById("remarks").value;

    // 改變原本得到的數據格式爲textNode格式
    name = document.createTextNode(name);
    onlyId = document.createTextNode(onlyId);
    title = document.createTextNode(title);
    address = document.createTextNode(address);
    remarks = document.createTextNode(remarks);

    // 創建tr（創建行）
    var tr = document.createElement("tr");
    // 創建td，並賦於class和值（創建單元格，並輸入值）
    var td1 = document.createElement("td");
    td1.className = "col1";
    td1.appendChild(name);
    var idTd = document.createElement("td");
    idTd.style.display = "none";
    idTd.appendChild(onlyId);
    var td2 = document.createElement("td");
    td2.className = "col2";
    td2.appendChild(title);
    var td3 = document.createElement("td");
    td3.className = "col3";
    td3.appendChild(address);
    var td4 = document.createElement("td");
    td4.className = "col4";
    td4.appendChild(remarks);
    var td5 = document.createElement("td");
    td5.className = "col5";
    td5.style.textAlign = "center";
    // 創建input，並設置按鍵反應（編輯、刪除 按鈕）
    var input1 = document.createElement('input');
    var input2 = document.createElement('input');
    input1.setAttribute('type','button');
    input1.setAttribute('value','編輯');
    input1.setAttribute('onclick','modify(this)');
    input1.id = 'btn1';
    input2.setAttribute('type','button');
    input2.setAttribute('value','刪除');
    input2.setAttribute('onclick','del(this)');
    input2.id = 'btn2';
    td5.appendChild(input1);
    td5.appendChild(input2);

    // 獲取table1
    var table = document.getElementById("table1");
    // 將tr加入table中
    table.appendChild(tr);
    // 將td依次加入tr中
    tr.appendChild(td1);
    tr.appendChild(idTd);
    tr.appendChild(td2);
    tr.appendChild(td3);
    tr.appendChild(td4);
    tr.appendChild(td5);

    // 改變當前共多少條數
    // 獲取table有多少行
    var num = table.rows.length -1;
    // 將行數寫入
    var rowsNumber = document.getElementById("rowsNum");
    rowsNumber.innerHTML = num;

    // 獲取一頁顯示多少條數據
    var index = document.getElementById("sel").selectedIndex;
    var opt = document.getElementById("opt" + index).value;
    opt = parseInt(opt);

    // 獲取當前頁面
    var page = document.getElementById("pno").innerText;
    page = parseInt(page);

    // 超過該頁面顯示數量的數據，不顯示
    for (var i=(page*opt)+1; i<num+1; i++){
        table.rows[i].style.display = "none";
    }

    // 將主頁面顯示
    var total1 = document.getElementById("total1").style;
    total1.display = "block";
    // 將添加信息頁面隱藏
    var total2 = document.getElementById("total2").style;
    total2.display = "none";
}

// 刪除函數
function del(obj){
    // 獲取待刪除行
    var objParentnode = obj.parentNode.parentNode;
    // 刪除
    objParentnode.remove();
    // 改變當前共多少條數
    // 獲取table1
    var table = document.getElementById("table1");
    // 獲取table有多少行
    var num = table.rows.length -1;
    // 將行數寫入
    var rowsNumber = document.getElementById("rowsNum");
    rowsNumber.innerHTML = num;

    // 獲取一頁顯示多少條數據
    var index = document.getElementById("sel").selectedIndex;
    var opt = document.getElementById("opt" + index).value;
    opt = parseInt(opt);

    // 獲取當前頁面
    var page = document.getElementById("pno").innerText;
    page = parseInt(page);

    // 刪除數據後，數據自動補齊
    if (num > (page*opt)+1){
        for (var i=((page-1)*opt)+1; i<(page*opt)+1; i++){
            table.rows[i].style.display = "table-row";
        }
    }
    else {
        for (var i=((page-1)*opt)+1; i<num+1; i++){
            table.rows[i].style.display = "table-row";
        }
    }
}

// 編輯函數
function modify(obj) {
    // 將主頁面隱身
    var total1 = document.getElementById("total1").style;
    total1.display = "none";
    // 將添加信息頁面顯示
    var total2 = document.getElementById("total2").style;
    total2.display = "block";

    // 顯示提交1按鈕，隱藏提交2按鈕
    document.getElementById("submit1").style.display = "none";
    document.getElementById("submit2").style.display = "block";

    // 獲取待編輯數據
    objTr = obj.parentNode.parentNode;
    objTd = objTr.getElementsByTagName('td');

    // 將輸入的值變爲這一行的數據
    var name = document.getElementById("name").value = objTd[0].innerText;
    var onlyId = document.getElementById("id").value = objTd[1].innerText;
    var title = document.getElementById("title").value = objTd[2].innerText;
    var address = document.getElementById("address").value = objTd[3].innerText;
    var remarks = document.getElementById("remarks").value = objTd[4].innerText;
}

// 提交2
function submit2() {
    // 將主頁面顯示
    var total1 = document.getElementById("total1").style;
    total1.display = "block";
    // 將添加信息頁面隱藏
    var total2 = document.getElementById("total2").style;
    total2.display = "none";

    // 修改編輯行的數據
    objTd[0].innerText = document.getElementById("name").value;
    objTd[1].innerText = document.getElementById("id").value;
    objTd[2].innerText = document.getElementById("title").value;
    objTd[3].innerText = document.getElementById("address").value;
    objTd[4].innerText = document.getElementById("remarks").value;
}

// 下一頁
function next() {
    // 獲取table1
    var table = document.getElementById("table1");
    var num = table.rows.length -1;

    // 獲取當前頁面
    var page = document.getElementById("pno").innerText;
    page = parseInt(page);

    // 獲取每頁顯示多少條數據
    var index = document.getElementById("sel").selectedIndex;
    var opt = document.getElementById("opt" + index).value;
    opt = parseInt(opt);

    // 總頁數
    var pageSum = Math.ceil((num) / opt);

    // 如果下一頁小於總頁數，則跳轉到下一頁，否則報出提示
    if (page < pageSum) {
        page = page + 1;
        document.getElementById("pno").innerText = page;
        for (var i=((page-2)*opt)+1; i<((page-1)*opt)+1; i++){
            table.rows[i].style.display = "none";
        }
        for (var i=((page-1)*opt)+1; i<(page*opt)+1; i++){
            table.rows[i].style.display = "table-row";
        }
    }
    else {
        window.alert("該頁爲最後一頁，無法前往下一頁！")
    }
}

// 上一頁
function last() {
    // 獲取table1
    var table = document.getElementById("table1");
    var num = table.rows.length -1;

    // 獲取當前頁面
    var page = document.getElementById("pno").innerText;
    page = parseInt(page);

    // 獲取每頁顯示多少條數據
    var index = document.getElementById("sel").selectedIndex;
    var opt = document.getElementById("opt" + index).value;
    opt = parseInt(opt);

    // 如果是首頁，則報出提示，否則跳轉到上一頁
    if (page > 1) {
        document.getElementById("pno").innerText = page - 1;
        for (var i=((page-2)*opt)+1; i<((page-1)*opt)+1; i++){
            table.rows[i].style.display = "table-row";
        }
        for (var i=((page-1)*opt)+1; i<(page*opt)+1; i++){
            table.rows[i].style.display = "none";
        }
    }
    else {
        window.alert("該頁爲首頁，無法前往上一頁！")
    }
}

// 分頁
function pagination() {
    // 獲取table1
    var table = document.getElementById("table1");
    var num = table.rows.length -1;

    // 獲取每頁顯示多少條數據
    var index = document.getElementById("sel").selectedIndex;
    var opt = document.getElementById("opt" + index).value;
    opt = parseInt(opt);

    // 跳轉到首頁
    document.getElementById("pno").innerText = 1;
    for (var i=1; i<opt+1; i++){
        table.rows[i].style.display = "table-row";
    }
    for (var i=opt+1; i<num+1; i++){
        table.rows[i].style.display = "none";
    }
}

function seach() {
    // 獲取table1
    var table = document.getElementById("table1");
    // 獲取查找關鍵字
    var seach = document.getElementById("seach").value;
    // 以什麼查找
    var index = document.getElementById("s").selectedIndex;

    // 獲取table有多少行
    var num = table.rows.length -1;

    document.getElementById("pno").innerText = 1;

    if (num>1){
        for (var i=1; i<num+1; i++){
            var content = table.rows[i].cells[index].innerText;
            if (content.indexOf(seach) != -1){
                table.rows[i].style.display = 'table-row';
            }
            else {
                table.rows[i].style.display = 'none';
            }
        }
    }
}

function gopage() {
    // 獲取table1
    var table = document.getElementById("table1");
    var num = table.rows.length -1;

    // 獲取跳轉頁面
    var page = document.getElementById("gopg").value;
    page = parseInt(page);

    // 獲取每頁顯示多少條數據
    var index = document.getElementById("sel").selectedIndex;
    var opt = document.getElementById("opt" + index).value;
    opt = parseInt(opt);

    // 總頁數
    var pageSum = Math.ceil((num) / opt);

    if (page < pageSum) {
        for (var i=((page-1)*opt)+1; i<(page*opt)+1; i++){
            table.rows[i].style.display = "table-row";
        }
        for (var i=1; i<((page-1)*opt)+1; i++) {
            table.rows[i].style.display = "none";
        }
        for (var i=(page*opt)+1; i<num+1; i++){
            table.rows[i].style.display = "none";
        }
        document.getElementById("pno").innerText = page;
    }
    if (page == pageSum) {
        for (var i=((page-1)*opt)+1; i<num+1; i++){
            table.rows[i].style.display = "table-row";
        }
        for (var i=1; i<((page-1)*opt)+1; i++) {
            table.rows[i].style.display = "none";
        }
        document.getElementById("pno").innerText = page;
    }
    if (page > pageSum) {
        window.alert("您輸入的頁碼超出總頁碼，請重新輸入！")
    }
}

結語

代碼中都寫有註釋，較難的部分爲幾個 for 循環，希望您能耐心閱讀，如還有不理解的地方，可以通過評論或郵箱聯繫我（[email protected]）。

最終，望您學業有成、事業有成，謝謝！

純JS+HTML+CSS實現表格增刪改查翻頁--模板文件管理

純JS+HTML+CSS實現表格增刪改查翻頁--模板文件管理

效果

頁面

增

刪

改

翻頁

頁面顯示條數

查找

跳頁

代碼

結語

win11關閉自動檢測病毒刪文件

千兆寬帶實際網速能到達多少？

HTML實現產品基本信息表單--初入HTML2

純HTML代碼繪製表格--初入HTML1

純JS+HTML+CSS實現表格增刪改查翻頁--模板文件管理

JavaScript之將數字字符轉化爲數字以參與數學運算--漸入HTML7

JavaScript之點擊打開新網頁--漸入HTML8

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結