【JavaScript】创建表格动态插入数据_js动态添加html

作者：空白诗007 | 2024-07-27 04:41:09

踩

js动态添加html

使用JavaScript动态插入表格和数据

一、创建HTML并布置好基本格局

这里没有什么难点，基本HTML知识
为了简单实现没有使用thead和tbody进行设计

<html>
<head>
<meta charset="UTF-8">
<title>学生信息表</title> 
<style>

</style>
<script>

</script>
</head>
<body>
    <div>
        <table>
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>学号</td>
            </tr>
        </table>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

二、设置表格CSS

width是宽度，100%表示占据网页整个宽度
border是table边框
border-style是边框样式，dotted表示虚线，solid表示实线

<style>
    table{
        width: 100%;
        border: 1px;
        border-style: solid;
    }
    table td{
        border: 0.5px;
        border-style: solid;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11

三、编写JavaScript脚本

1.首先在HTML中插入button，点击按钮时进行新增表格

<button onclick="new();">新增</button>
1

2.接着，编写new()函数体

innerHTML是插入HTML元素，这里其实插入的是文本，也可以插入其余元素，例如document.innerHTML = “标题”

<script>
    function add(){
        // 获取table标签元素
        let table = document.getElementById("work_table");
        // 创建新行
        let newRow = table.insertRow();
        // 创建三个新单元格
        let cellName = newRow.insertCell();
        let cellAge = newRow.insertCell();
        let cellID = newRow.insertCell();
        // 向表格中插入元素
        cellName.innerHTML = "张三";
        cellAge.innerHTML = "男";
        cellID.innerHTML = "1";
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3.运行效果
在这里插入图片描述

四、根据我上篇文章，实现弹出窗口输入文本然后插入表格

上篇文章链接 link.

1.实现弹出窗口，这里和上篇一样，不详细说明

<html>
<head>
<meta charset="UTF-8">
<title>学生信息表</title> 
<style>
    table{
        width: 100%;
        border: 1px;
        border-style: solid;
    }
    table td{
        border: 0.5px;
        border-style: solid;
    }
    body{
        background-color: cyan;
    }
    #popDiv{
        display: none;
        background-color: whitesmoke;
        z-index: 11;
        width: 600px;
        height: 600px;
        position:fixed;
        top:0;
        right:0;
        left:0;
        bottom:0;
        margin:auto;
    }
    /* 关闭按钮样式 */
    #popDiv .close a {
        text-decoration: none;
        color: whitesmoke;
    }
    /* 弹出界面的关闭按钮 */
    #popDiv .close{
        text-align: right;
        margin-right: 5px;
        background-color:#2D2C3B;
    }
    #popDiv p{
        text-align: center;
        font-size: 25px;
        font-weight: bold;
    }
</style>
<script>
    function popDiv(){
            // 获取div元素
            var popBox = document.getElementById("popDiv");
            var popLayer = document.getElementById("popLayer");

            // 控制两个div的显示与隐藏
            popBox.style.display = "block";
            popLayer.style.display = "block";
    }

    function closePop(){
        // 获取弹出窗口元素
        let popDiv = document.getElementById("popDiv");

        popDiv.style.display = "none";
    }

    function add(){
        // 获取table标签元素
        let table = document.getElementById("work_table");
        // 创建新行
        let newRow = table.insertRow();
        // 创建三个新单元格
        let cellName = newRow.insertCell();
        let cellAge = newRow.insertCell();
        let cellID = newRow.insertCell();
        // 向表格中插入元素
        cellName.innerHTML = "张三";
        cellAge.innerHTML = "男";
        cellID.innerHTML = "1";
    }
</script>
</head>
<body>
    <button onclick="popDiv();">弹窗</button>
    <div id="popLayer">
        <table id="work_table">
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>学号</td>
            </tr>
        </table>
    </div>

    <div id="popDiv">
        <div class="close">
            <a href="javascript:void(0)" onclick="closePop()">关闭</a>
        </div>
            <p>此处为弹出窗口</p>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

2.给弹出窗口设置三个文本框用于输入

<div id="popDiv">
        <div class="close">
            <a href="javascript:void(0)" onclick="closePop()">关闭</a>
        </div>
        <div>
            请输入<br/><br/>
            <form
                <label>姓名(*)</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="text" id="NAME"><br/>

                <label>年龄(*)</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="text" id="AGE"><br/>

                <label>工人性别(*)</label>
                <input type="text" id="SEX"><br/>
            </form>
        </div>
    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3.现在只需要修改add()函数就可以，也就是获取文本框的内容

这里相比于之前的add()函数只是新增了获取文本框的内容，获取文本框和获取table是一样的方法，通过id获取，也可以通过name和class获取
可以通过console.log(typeof(name.value));获取变量的类型，在浏览器中查看，F12打开console控制台

	function add(){
        // 获取table标签元素
        let table = document.getElementById("work_table");
        // 创建新行
        let newRow = table.insertRow();
        // 创建三个新单元格
        let cellName = newRow.insertCell();
        let cellAge = newRow.insertCell();
        let cellID = newRow.insertCell();
        // 获取文本框内容
        let name = document.getElementById("NAME");
        let sex = document.getElementById("SEX");
        let age = document.getElementById("AGE");
        // 向表格中插入元素
        cellName.innerHTML = name.value;
        cellAge.innerHTML = age.value;
        cellSex.innerHTML = sex.value;
        console.log(typeof(name.value));

        closePop();
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

五、总代码

<html>
<head>
<meta charset="UTF-8">
<title>学生信息表</title> 
<style>
    table{
        width: 100%;
        border: 1px;
        border-style: solid;
    }
    table td{
        border: 0.5px;
        border-style: solid;
    }
    body{
        background-color: cyan;
    }
    #popDiv{
        display: none;
        background-color: whitesmoke;
        z-index: 11;
        width: 600px;
        height: 600px;
        position:fixed;
        top:0;
        right:0;
        left:0;
        bottom:0;
        margin:auto;
    }
    /* 关闭按钮样式 */
    #popDiv .close a {
        text-decoration: none;
        color: whitesmoke;
    }
    /* 弹出界面的关闭按钮 */
    #popDiv .close{
        text-align: right;
        margin-right: 5px;
        background-color:#2D2C3B;
    }
    #popDiv p{
        text-align: center;
        font-size: 25px;
        font-weight: bold;
    }
</style>
<script>
    function popDiv(){
            // 获取div元素
            var popBox = document.getElementById("popDiv");
            var popLayer = document.getElementById("popLayer");

            // 控制两个div的显示与隐藏
            popBox.style.display = "block";
            popLayer.style.display = "block";
    }

    function closePop(){
        // 获取弹出窗口元素
        let popDiv = document.getElementById("popDiv");

        popDiv.style.display = "none";
    }

    function add(){
        // 获取table标签元素
        let table = document.getElementById("work_table");
        // 创建新行
        let newRow = table.insertRow();
        // 创建三个新单元格
        let cellName = newRow.insertCell();
        let cellAge = newRow.insertCell();
        let cellID = newRow.insertCell();
        // 获取文本框内容
        let name = document.getElementById("NAME");
        let sex = document.getElementById("SEX");
        let ID = document.getElementById("AGE");
        // 向表格中插入元素
        cellName.innerHTML = name.value;
        cellAge.innerHTML = age.value;
        cellSex.innerHTML = sex.value;

        closePop();
    }
</script>
</head>
<body>
    <button onclick="popDiv();">弹窗</button>
    <div id="popLayer">
        <table id="work_table">
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>学号</td>
            </tr>
        </table>
    </div>

    <div id="popDiv">
        <div class="close">
            <a href="javascript:void(0)" onclick="closePop()">关闭</a>
        </div>
        <div>
            请输入<br/><br/>
            <form
                <label>姓名(*)</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="text" id="NAME"><br/>

                <label>年龄(*)</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="text" id="AGE"><br/>

                <label>工人性别(*)</label>
                <input type="text" id="SEX"><br/>
            </form>
            <button onclick="add();">√保存</button>
        </div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/空白诗007/article/detail/888710