动态创建表格

最新推荐文章于 2023-02-06 19:13:34 发布

木槿晞

最新推荐文章于 2023-02-06 19:13:34 发布

阅读量78

点赞数

分类专栏：课程文章标签： js

本文链接：https://blog.csdn.net/xyw_jzj5201314/article/details/109633699

版权

课程专栏收录该内容

21 篇文章 0 订阅

订阅专栏

动态创建表格

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,
        tr,
        th,
        td {
            border: 1px solid slateblue;
        }
        
        table {
            width: 400px;
            /* 让单元格合并 */
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <!-- <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>其他</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>贾贾</td>
                <td>女</td>
                <td>20</td>
                <a href="#">删除</a>
            </tr>
            <tr>
                <td>阿银</td>
                <td>男</td>
                <td>17</td>
                <a href="#">删除</a>
            </tr>
            <tr>
                <td>木槿</td>
                <td>女</td>
                <td>20</td>
                <a href="#">删除</a>
            </tr>
            </tr>
            <tr>
                <td>阿银</td>
                <td>男</td>
                <td>17</td>
                <a href="#">删除</a>
            </tr>
        </tbody>
    </table> -->
    <dir class="box"></dir>
</body>
<script>
    var box = document.querySelector(".box");
    // 创建table
    var table = document.createElement("table");
    box.appendChild(table)
        //创建thead添加到table里面
    var thead = document.createElement("thead");
    table.appendChild(thead)
        //创建tr
    var tr = document.createElement("tr");
    thead.appendChild(tr)

    var arr = ["姓名", "性别", "年龄", "其他"];
    for (var i = 0; i < arr.length; i++) {
        var th = document.createElement("th");
        th.innerHTML = arr[i]
        tr.appendChild(th)
    }
    // 创建tbody
    var tbody = document.createElement("tbody");
    table.appendChild(tbody)
    var datas = [{
        name: "aa",
        sex: "nan",
        age: "8"
    }, {
        name: "cc",
        sex: "nv",
        age: "8"
    }, {
        name: "kk",
        sex: "nan",
        age: "12"

    }, {
        name: "uu",
        sex: "nan",
        age: "20"
    }, {

        name: "oo",
        sex: "nv",
        age: "17"
    }]
    for (var i = 0; i < datas.length; i++) {
        var tr = document.createElement("tr");
        tbody.appendChild(tr);
        for (var k in datas[i]) {
            var td = document.createElement("td");
            td.innerHTML = datas[i][k]
            tr.appendChild(td)
        }
        var td = document.createElement("td");
        tr.appendChild(td)
        var a = document.createElement("a");
        a.href = "#";
        a.innerHTML = "删除";
        td.appendChild(a)
        a.onclick = function() {
            this.parentNode.parentNode.remove()
        }
        tr.onmouseover = function() {
            this.style.backgroundColor = "green"
        }
        tr.onmouseout = function() {
            this.style.backgroundColor = ""
        }
    }
</script>

</html>

木槿晞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态创建表格

动态创建表格<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table,
复制链接

扫一扫