JS + HTML 表格动态添加一行_js实现表格新增一行

作者：盐析白兔 | 2024-06-16 03:05:14

踩

js实现表格新增一行

JS + HTML 表格动态添加一行

一、使用innerHTML对表格进行添加一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 50px;
        }

        a{
            color: red;
        }
        

    </style>
</head>
<body>
    <div><a>表格动态添加一行</a></div>
    <table id="table1" border="1" >
        <tr>
            <th id="td_id">编号</th>
            <th id="td_name">姓名</th>
            <th id="td_age">年龄</th>
            <th id="td_sex">性别</th>
        </tr>
    </table>

    <div><input type="button" id="btn_add" value="添加"></div>
    <script>
        /**
         * 动态添加的方法有两种
         *  1、document.create();
         *  2、innerHTML();
         *
         */

        document.getElementById("btn_add").οnclick=function () {
            var table =document.getElementById("table1");
            table.innerHTML += "<tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>";

        }

    </script>
</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

使用innerHTML对表格添加一行，如需动态添加数据可添加输入框，将数据动态输入

添加输入框：

<div><input type="text" id="btn_id"><input type="text" id="btn_name"><input type="text" id="btn_age"><input type="text" id="btn_sex"><input type="button" id="btn_add" value="添加"></div>
1

对输入框数据获取并添加数据到表格中

document.getElementById("btn_add").οnclick=function () {
    var id=document.getElementById("btn_id").value;
    var name=document.getElementById("btn_name").value;
    var age=document.getElementById("btn_age").value;
    var sex=document.getElementById("btn_sex").value;
    var table =document.getElementById("table1");
    table.innerHTML += "<tr><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>";

}
1
2
3
4
5
6
7
8
9

二、使用create方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div><a>动态添加表格一行</a></div>
    <div><input type="text" id="btn_id"><input type="text" id="btn_name"><input type="text" id="btn_age"><input type="text" id="btn_sex"><input type="button" id="btn_add" value="添加"></div>
    <table id="table1" border="1" >
        <tr>
            <th id="td_id">编号</th>
            <th id="td_name">姓名</th>
            <th id="td_age">年龄</th>
            <th id="td_sex">性别</th>
        </tr>
    </table>
    
    <script>

        document.getElementById("btn_add").onclick = function () {
            var id=document.getElementById("btn_id").value;
            var name=document.getElementById("btn_name").value;
            var age=document.getElementById("btn_age").value;
            var sex=document.getElementById("btn_sex").value;
            var table =document.getElementById("table1");

            var td_id = document.createElement("td");
            var text_id = document.createTextNode(id);
            td_id.appendChild(text_id);

            var td_name = document.createElement("td");
            var text_name = document.createTextNode(name);
            td_name.appendChild(text_name);

            var td_age = document.createElement("td");
            var text_age = document.createTextNode(age);
            td_age.appendChild(text_age);

            var td_sex = document.createElement("td");
            var text_sex = document.createTextNode(sex);
            td_sex.appendChild(text_sex);

            var tr = document.createElement("tr");
            tr.appendChild(td_id);
            tr.appendChild(td_name);
            tr.appendChild(td_age);
            tr.appendChild(td_sex);

            table.appendChild(tr);


        }

    </script>
</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

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】