Dark horse programmer-dynamic form (add part)

1. First look at the overall effect:

2. Overall thinking: use html, css, javascript to realize dynamic tables (add and delete functions).

Show a static page
Get the "add" button
Bound event
Create td tags
Get the content of the input box
Add the content of the input box to the td tag
Create tr tag
Td tag will be added to the tr
Get table
The tr is added to the table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            border: 1px solid;
            margin: auto;
            width: 500px;

        }
        td,th {
            border: 1px solid;
            text-align: center;

        }
        div {
            text-align: center;
            margin: 50px;
        }
    </style>
</head>
<body>
            <div>
                <input type="text" id="id" placeholder="请输入编号">
                <input type="text" id="name" placeholder="请输入姓名">
                <input type="text" id="gender" placeholder="请输入性别">
                <input type="button" id="btn_add" value="添加">
            </div>
            <table cellspacing="0">
                <caption>学生信息表</caption>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>令狐冲</td>
                    <td>男</td>
                    <td><a href="javascript:void(0);">删除</a></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>任我行</td>
                    <td>男</td>
                    <td><a href="javascript:void(0);">删除</a></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>岳不群</td>
                    <td>？</td>
                    <td><a href="javascript:void(0);">删除</a></td>
                </tr>
            </table>
</body>
</html>

The above is the initial static page.

You can see from the code that there are a total of 3 input boxes and an add button. So steps 4-6 should be created 3 times , namely: td_id, td_name, td_gender.

javascript code:

<script>
                var btn_add = document.getElementById("btn_add");
                btn_add.onclick=function () {
                    var id = document.getElementById("id").value;  //获取内容
                    var name = document.getElementById("name").value;
                    var gender = document.getElementById("gender").value;
                //    创建td
                    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_gender = document.createElement("td");
                    var text_gender = document.createTextNode(gender);
                    td_gender.appendChild(text_gender);

                    var td_a=document.createElement("td");
                    var ele_a=document.createElement("a");
                    ele_a.setAttribute("href","javascript:void(0);");
                    var text_a = document.createTextNode("删除");
                    ele_a.appendChild(text_a);
                    td_a.appendChild(ele_a);
                //    创建tr
                    var tr = document.createElement("tr");
                //    添加td
                    tr.appendChild(td_id);
                    tr.appendChild(td_name);
                    tr.appendChild(td_gender);
                    tr.appendChild(td_a);
                //    获取table
                    var table = document.getElementsByTagName("table")[0];
                    table.appendChild(tr);
                }
                var del_a = document.getElementsByTagName("a");

            </script>

cs code:

<style>
        table {
            border: 1px solid;
            margin: auto;
            width: 500px;

        }
        td,th {
            border: 1px solid;
            text-align: center;

        }
        div {
            text-align: center;
            margin: 50px;
        }
    </style>

Dark horse programmer-dynamic form (add part)

Dark horse programmer-dynamic form (add part)

Guess you like