表格的增和删

最新推荐文章于 2022-04-06 00:01:39 发布

天马行空zqzq

最新推荐文章于 2022-04-06 00:01:39 发布

阅读量86

点赞数

本文链接：https://blog.csdn.net/qq_42039912/article/details/104995195

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="生成表格" id="btn1">
<input type="button" value="添加" id="btn2">
<div id="box">

</div>

<script src="common.js"></script>
<script>
    var heads = ["姓名", "科目", "分数", "操作"];
    var datas = [
        {"name": "乔峰", "subject": "语文1", "score": 99},
        {"name": "张三丰", "subject": "语文2", "score": 80.8},
        {"name": "张无忌", "subject": "语文3", "score": 70.8},
        {"name": "梅超风", "subject": "语文4", "score": 100},
        {"name": "黄老邪", "subject": "语文5", "score": 60},
        {"name": "凤姐", "subject": "语文6", "score": 70},
        {"name": "芙蓉姐姐", "subject": "语文7", "score": 89.8}
    ];
    var btn1 = my$("btn1");
    var btn2 = my$("btn2");
    var box = my$("box");
    //创建表格
    btn1.onclick = clickHandle;

    function clickHandle() {
        var table = box.children[0];
        if (table) {
            box.removeChild(table);
        }
        table = document.createElement("table");
        box.appendChild(table);
        table.cellSpacing = "1";
        table.cellPadding = "1";
        table.border = "1";
        table.id = "tab";
        table.style.width = "400px";
        var thead = document.createElement("thead");
        table.appendChild(thead);
        var tr = document.createElement("tr");
        thead.appendChild(tr);
        tr.style.backgroundColor = "#ccc";
        thead.style.lineHeight = "50px";
        //tr.style.lineHeight="50px";
        for (var i = 0; i < heads.length; i++) {
            var th = document.createElement("th");
            tr.appendChild(th);
            th.innerText = heads[i];
        }
        //生成数据时用tbody
        var tbody = document.createElement("tbody");
        table.appendChild(tbody);
        tbody.style.textAlign = "center";
        for (var j = 0; j < datas.length; j++) {
            tr = document.createElement("tr");
            tbody.appendChild(tr);
            for (var key in datas[j]) {
                var td = document.createElement("td");
                tr.appendChild(td);
                td.innerText = datas[j][key];
            }
            //再生成一列
            var td = document.createElement("td");
            tr.appendChild(td);
            var link = document.createElement("a");
            td.appendChild(link);
            link.innerText = "删除";
            link.href = "JavaScript:void(0)";
            link.onclick = clickHandle;
        }

        function clickHandle() {
            tbody.removeChild(this.parentNode.parentNode);
        }
    }

    btn2.onclick = addHandle;

    function addHandle() {
        var tr = document.createElement("tr");
        var tbody = my$("tab").getElementsByTagName("tbody")[0];
        tbody.appendChild(tr);
        for (var i = 0; i < heads.length-1; i++) {
            var td = document.createElement("td");
            tr.appendChild(td);
            td.innerHTML = "<input type='text' value='' style='width:60px' >";
        }
        //再增加一列
        var td=document.createElement("td");
        tr.appendChild(td);
        td.innerHTML="<a href='JavaScript:void(0)' >确定</a>&nbsp<a href='JavaScript:void(0)' >取消</a>";
        var linkCancel=td.children[1];
        linkCancel.onclick=function(){
            //移除当前行
            tbody.removeChild(this.parentNode.parentNode);
        };
        var sureClick=td.children[0];
        sureClick.onclick=function(){
            var name=tr.children[0].children[0].value;
            var subject=tr.children[1].children[0].value;
            var score=tr.children[2].children[0].value;
            datas.push({"name":name,"subject":subject,"score":score});
            clickHandle();
        };
    }


</script>
</body>
</html>

天马行空zqzq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格的增和删

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><input type="button" value="生成表格" id="btn...
复制链接

扫一扫