js添加表格

最新推荐文章于 2024-05-03 16:01:29 发布

范2小青年

最新推荐文章于 2024-05-03 16:01:29 发布

阅读量366

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/u014805482/article/details/84326461

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <style>
        table {
            border: 1px solid #cccccc;
            border-collapse: separate;
            border-spacing: 0;
            width: 400px;

        }

        th, td {
            border: 1px solid #37cc83;
            text-align: center;
            font-weight: 900;
        }

        th {
            width: 400px;
            height: 100px;
            background-color: #eeeeee;
        }

        div {
            display: none;
        }

    </style>
</head>
<body>
<input value="生成表格" type="button" id="btn"/><br/>
<input value="添加" type="button" id="btn1"/>
<div class="map" id="map">

</div>
<script>
    var headArr = ["姓名", "科目", "分数", "操作"];
    var datas = [
        {"name": "乔峰", "subject": "语文1", "score": 99.8},
        {"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 tableArr = [];
    //先创建表格对象，创建的时候赋值
    var tableObj;
    function CreateTable() {

    }
    CreateTable.prototype.init = function (map) {
        //每次初始化之前先删除执行删除操作
        tableObj = document.createElement("table");
        remove();
        map.appendChild(tableObj);
        this.createHead(tableObj);
        this.createBody(tableObj);
        tableArr.push(tableObj);
    };
    CreateTable.prototype.newTable = function () {
        this.createNewTable(tableObj);
    };
    CreateTable.prototype.createHead = function (table) {
        var tr = document.createElement("tr");
        table.appendChild(tr);
        for (var i = 0; i < headArr.length; i++) {
            var th = document.createElement("th");
            tr.appendChild(th);
            th.innerHTML = headArr[i];
        }
    };
    CreateTable.prototype.createBody = function (table) {
        for (var i = 0; i < datas.length; i++) {
            var tr = document.createElement("tr");
            table.appendChild(tr);
            for (var key in datas[i]) {
                var td = document.createElement("td");
                tr.appendChild(td);
                td.innerHTML = datas[i][key];
            }
            var td = document.createElement("td");
            tr.appendChild(td);
            var aObj = document.createElement("a");
            aObj.href = "javascript:void(0);";
            aObj.innerHTML = "删除";
            aObj.onclick = aClick;//创建的时候就给a标签添加点击事件
            td.appendChild(aObj);
        }
    };
    //点击添加按钮的时候新增一列
    CreateTable.prototype.createNewTable = function (table) {
        var tr = document.createElement("tr");
        table.appendChild(tr);
        var inputArr = [];
        var tdArr = [];//初始化的时候先把td和input放进去
        for (var key in datas[0]) {
            var td = document.createElement("td");
            tdArr.push(td);
            tr.appendChild(td);
            var inputObj = document.createElement("input");
            inputArr.push(inputObj);
            inputObj.style.width = "40px";
            td.appendChild(inputObj);
        }
        var td = document.createElement("td");
        tr.appendChild(td);
        var aObj = document.createElement("a");
        aObj.innerHTML = "确定";
        aObj.href = "javascript:void(0);";
        aObj.style.marginRight = "5px";
        aObj.onclick = function () {
            for (var i = 0; i < tdArr.length; i++) {
                tdArr[i].innerHTML = inputArr[i].value;
            }
            aObj.style.display = "none";
            aObj1.innerHTML = "删除";
        };
        var aObj1 = document.createElement("a");
        aObj1.innerHTML = "取消";
        aObj1.href = "javascript:void(0);";
        aObj1.onclick = aClick;
        td.appendChild(aObj);
        td.appendChild(aObj1);
    };

    //保证表格唯一性
    function remove() {
        for (var i = 0; i < tableArr.length; i++) {
            var ele = tableArr[i];
            ele.parentNode.removeChild(ele);
        }
        tableArr.length = 0;
    }

    //删除事件
    function aClick() {
        tableObj.removeChild(this.parentNode.parentNode);
    }

    //点击按钮生成表格
    document.getElementById("btn").onclick = function () {
        document.getElementById("map").style.display = "block";
        var ct = new CreateTable();
        ct.init(document.querySelector(".map"));
    };
    //点击按钮添加表格
    document.getElementById("btn1").onclick = function () {
      var ct = new CreateTable();
      ct.newTable();
    };

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

在这里插入图片描述

范2小青年

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js添加表格

&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Title&amp;lt;/title&amp;
复制链接

扫一扫

专栏目录