可编辑表格

项目目标

1. 通过JSON格式的数组生成可编辑表格；
2. 能灵活配置可编辑的数据列
3. 能配置和实现数据行的可删除操作
4. 

外形框架

利用<table>、<thead>、<tr>等标签创建表单的外形框架

<table class="table" id="tableBox">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>语文</th>
                    <th>数学</th>
                    <th>英语</th>
                    <th>操作</th>
                </tr>
            </thead>

css美化表单

* {
    margin: 0;
    padding: 0;
    --border: 2px solid rgb(59, 236, 53);
    color: #205805;
}

#tableBox {
    position: relative;
    user-select: none;
}

.err {
    display: none;
    top: 95px;
    width: 160px;
    position: absolute;
    margin-left: -100px;
    left: 50%;
    text-align: center;
    padding: 15px 18px;
    background: orange;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    transition: top 1s;
    z-index: -1;
}

.movedown {
    top: 95px;
    animation: movedown 3s;
}

.table {
    margin: 0 auto;
    border-spacing: 0;
    border-collapse: collapse;
    text-align: center;
    margin-top: 47px;
    z-index: 1;
}

@keyframes movedown {
    0% {
        top: 95px;
    }

    50% {
        top: 48px;
    }

    100% {
        top: 95px;
    }
}

.title {
    text-align: center;
    padding: 8px 0;
}

td>input {
    width: 100px;
    height: 45px;
    border: none;
    font-size: 16px;
}

tr,
td,
th {
    border: var(--border);
}

th {
    font-weight: 600;
    text-align: center;
    background-color: rgb(145, 239, 94);
}

.table>thead>tr>th,
.table>tbody>tr>td {
    width: 100px;
    height: 45px;
    font-size: 16px;
}

.table>thead>tr {
    font-family: "宋体";
}

button {
    background-color: #30da49;
    border: #30da49;
    color: white;
    width: 40px;
    height: 30px;
    border-radius: 3px;
}

逻辑框架

1. json格式数组：
将json格式转换成数据原来的格式
通过Ajax处理数据

 const xhr = new XMLHttpRequest();
    // 自动转换，要把json格式转换为数据原来的格式
    xhr.responseType = "json";
    // 设置请求信息
    xhr.open("GET", baseurl);
    // 发送请求
    xhr.send();
    // 数据返回时的处理函数
    xhr.addEventListener("load", function () {
        if (xhr.status === 200) {
            xhr.response.forEach((item) => {
                var tab = document.querySelector(".table");
                var tbo = document.createElement("tbody");
                tbo.innerHTML = `
                                    <td>${item.id}</td>
                                    <td>${item.name}</td>
                                    <td name="grade">${item.grades[0]}</td>
                                    <td name="grade">${item.grades[1]}</td>
                                    <td name="grade">${item.grades[2]}</td>
                                 <td name="Del"><button onclick='delData(this)'>删除</button></td>
                                    `;
                // 方法可向节点的子节点列表的末尾添加新的子节点
                tab.appendChild(tbo);
            });
        }
        getbutton();
    });

2. 获取点击事件

var stutable = document.getElementsByClassName("table")[0];
var geterr = document.getElementsByClassName("err")[0];
var trs = document.getElementsByTagName("tr");
function getbutton() {
    var grades = document.getElementsByName("grade");
    //console.log(grades)
    console.log(grades.length)
    for (let i = 0; i < grades.length; i++) {
        grades[i].onclick = function () {
            getchange(this);
        };
    }
}

3. 编辑化：
• 获取原本数据；
• 创建新的节点；
• 判断输入的数据是否符合规范；
• 更新数据

function getchange(cel) {
    if (document.getElementsByClassName("active-input").length == 0) {
        var oldhtml = cel.innerHTML;  //获取数据
        cel.innerHTML = "";
        var newInput = document.createElement("input");//创建节点
        newInput.setAttribute("class", "active-input"); //添加元素属性，
        newInput.value = oldhtml;
        newInput.onblur = function () { //判断范围，是否符合规则
            if (!Number(this.value) || this.value > 100 || this.value < 0) {
                console.log("err");
                addAnimate();
                geterr.style.display = "block"; //block显示动画
                return;
            } else {
                geterr.style.display = "none"; //none隐藏动画
                // 当触发时判断新增元素值是否为空，为空则不修改，并返回原有值 
                cel.innerHTML = this.value == oldhtml ? oldhtml : this.value;
                getchange();
            }
        };
        newInput.select();
        cel.appendChild(newInput); //把创建的节点加在后面
        newInput.focus(); //设置获得光标
    } else {
        return;
    }
}

4. 删除行：

if (event.srcElement.tagName == "BUTTON") {//获取源对象BUTTON
        if (window.confirm("是否确认删除")) {
            var bt_n = event.srcElement;
            var tr = bt_n.parentElement.parentElement;
            //根据id获取到表格
            var listTbl = document.getElementById("tableBox");
            listTbl.deleteRow(tr.rowIndex);

        }
    }

5. 添加动画：
动画添加可以更好的展现表格，提高用户的交互性

function addAnimate() {   //addAnimate添加动画
    geterr.className = "err movedown";
}