利用js动态创建表格

末蓝、 2023-06-07 10:48 40阅读 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>

## **\#运行结果图** ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAzMzMwOQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAzMzMwOQ_size_16_color_FFFFFF_t_70]: /images/20230601/aa13866fc5864e12aebd1b301385fa3e.png