组件化可编辑表格

        我们使用纯JavaScript实现表格的实现，首先创建可用的Json数据，再通过Initable()方法动态创建一个表格，然后再通过Changetable()方法对其中的指定列进行编辑和修改，同时可以删除一整行数据。

实现思路

        在实现方法上，首先定义了一个包含学生信息的 JSON 数组，然后分为两个部分：创建表格和改变表格。创建表格的函数中会动态创建表格的各个元素，并将数据填入表格中；而改变表格的函数则会遍历表格中的可编辑单元格，并将其设为可点击，同时当单元格被点击时会弹出一个可以进行编辑的 input 元素，并提供规则限制输入内容以确保合法性。

实现效果

重要代码

 

// 改变表格内容 传入id和（可编辑的列，编辑规则）
function changeTable(id, conf) {
    let table = document.getElementById(id);
    if (!table) return false;
    //遍历th的内容，并将其返回为一个数组
    let cols = Array.from(table.querySelectorAll("th"), function (item) {
        return item.innerText;
    });
    //...
}

//给含有‘change’类,添加事件
let tds = table.getElementsByTagName("td");
for (let i = 0; i < tds.length; i++) {
    if (tds[i].className.includes("change")) {
        // 如果单元格的类名包含 "change"，则为其添加点击事件
        tds[i].onclick = function () {
            let old = this.innerHTML; // 获取单元格原始内容
            let inp = document.createElement("input"); // 创建 input 元素
            //...
        };
    }
}

//创建删除按钮
let td = document.createElement("td");
td.innerText = "✖";
td.classList.add("remove");
td.onclick = function () {
    if (confirm("确定要删除吗？"))
        //提供确认功能
        this.parentElement.parentElement.removeChild(this.parentElement);
};