利用js动态创建表格

最新推荐文章于 2024-04-27 13:27:37 发布

啦啦啦啦嚓Fu

最新推荐文章于 2024-04-27 13:27:37 发布

阅读量480

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_44033309/article/details/102549553

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

利用js动态创建表格（appendChild实现覆盖式创建）

在用JS创建表格时如果用 document.write()的话会将页面全部覆盖，只能做到输入一次的效果。但是使用appendChild的话会有一个问题，就是你不能除去你上次创建的表格，所以这次做一点小的改变让appendChild实现覆盖式创建。话不多说一切尽在代码中。

代码

`<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js实验1——自定义表格</title>
    <script>
        window.onload = function () {
            var Btn = document.getElementById("btn");
            var oDiv = document.getElementById("oDiv");
            Btn.onclick = function () {
                if (oDiv.hasChildNodes()) {   //如果oDiv拥有子节点则执行
                    oDiv.removeChild(oDiv.firstChild);  //每次执行时删除上次创建的字节点及删除上次创建的表格
                    var row = document.getElementById("row").value;  //获取输入的行值
                    var col = document.getElementById("col").value; // 获取输入的列值
                    var tab = document.createElement("table");   //创建一个DOM对象table
                    tab.border = '1px';
                    tab.style.margin = " 0 auto";
                    oDiv.appendChild(tab);  //将创建的table加入oDiv中
                    for (var i = 1; i <= row; i++) {
                        var tr = document.createElement("tr");
                        tab.appendChild(tr);
                        for (var j = 1; j <= col; j++) {
                            var td = document.createElement("td");
                            td.innerHTML = '第' + parseInt(i) + '行' + parseInt(j) + '列';
                            if (i % 2 == 0) { //改变单双行背景颜色
                                tr.style.background = "aqua";
                            }
                            tr.appendChild(td);
                        }
                    }
                }
                console.log(oDiv.hasChildNodes());
            }
        }
    </script>
</head>
<style>
    a {
        font-size: 14px;
        line-height: 18px;
        color: #fff;
        text-decoration: none;
        background: #3c91b3;
        border-radius: 5px;
    }

    .div1 {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #oDiv {
        margin-top: 50px;
    }
</style>

<body>
    <div class="div1">
        输入表格的行 <input type="number" id="row" min="1" max="30" step="1" />
        输入表格的列 <input type="number" id="col" min="1" max="30" step="1" />
        <a href="javascript:;" id="btn">生成表格</a>
    </div>
    <div id="oDiv">
    </div>
</body>

#运行结果图

在这里插入图片描述

啦啦啦啦嚓Fu

关注

0
点赞
踩
5

收藏

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

利用js动态创建表格（appendChild实现覆盖式创建）在用JS创建表格时如果用 document.write()的话会将页面全部覆盖，只能做到输入一次的效果。但是使用appendChild的话会有一个问题，就是你不能除去你上次创建的表格，所以这次做一点小的改变让appendChild实现覆盖式创建。话不多说一切尽在代码中。代码`<!DOCTYPE html><htm...
复制链接

扫一扫