Dark Horse Programmer-Dynamic Form (Upgraded Version)

Dark Horse Programmer-Dynamic Form (Upgraded Version)

First of all, thank you for your support. Not much to say, let's enter the topic below.

I believe you have already typed in the dynamic table. Do you feel that the code is too redundant , and you accidentally typed it wrong? Today, I will share with you the simplified method. First, let's look at the overall effect:

analysis:

1. The method mentioned earlier is mainly due to too much code repetition . 
2. Especially when you keep creating nodes

solve:

1. Use the HTML DOM object to get the content of the input box first
2. Add the content of the input box directly to the end of the table

Let's first look at the added part of the code:

<!--     添加  -->
            var addbtn = document.getElementById("addbtn");
            addbtn.onclick=function () {
                var id = document.getElementById("id").value;
                var name = document.getElementById("name").value;
                var gender = document.getElementById("gender").value;

            //    获取table
                var table = document.getElementsByTagName("table")[0];
                table.innerHTML+="<tr>\n" +
                    "                <td>"+id+"</td>\n" +
                    "                <td>"+name+"</td>\n" +
                    "                <td>"+gender+"</td>\n" +
                    "                <td><a href=\"javascript:void(0);\" onclick=\"delTr(this)\">删除</a></td>\n" +
                    "            </tr>"
            }

Is it a small amount of code.

Note: after table.innerHTML is +=

Meaning: add new content on the basis of the original table, if the +   is missing, the     original content will disappear after adding. To put it bluntly, only the "=" number is "replacement".

css code:

<style>
        body {
            background-color: #EEEEEE;
        }
        .topdiv {
            background-color: #A6A6A6;
            text-align: center;
            font-family: "Microsoft YaHei UI";
            font-size: 40px;
            color: cornflowerblue;
            width: 100%;
            height: 50px;
            box-sizing: border-box;
        }
        .twodiv {
            text-align: center;
            background-color: bisque;
            width: 100%;
            height: 50px;
            padding-top: 15px;
            box-sizing: border-box;
        }

        table {
            border: 1px solid;
            text-align: center;
            margin: auto;
            width: 100%;
        }
        tr,th,td {
            border: 1px solid;
        }
    </style>

html structure code:

<div class="topdiv">学生信息表</div>
        <div class="twodiv">
            <input id="id" type="text" placeholder="编号">
            <input id="name" type="text" placeholder="姓名">
            <input id="gender" type="text" placeholder="性别">
            <input id="addbtn" type="button" value="添加">
            <input id="rebtn" type="button" value="刷新">
        </div>
        <table cellspacing="0">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>1</td>
                <td>孙悟空</td>
                <td>男</td>
                <td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>猪八戒</td>
                <td>男</td>
                <td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td>嫦娥</td>
                <td>女</td>
                <td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
            </tr>
        </table>

JavaScript code:

<script>

        <!--     刷新按钮 -->
        var rebtn = document.getElementById("rebtn");
        rebtn.onclick=function () {
            location.reload();
        }


        <!--     添加  -->
            var addbtn = document.getElementById("addbtn");
            addbtn.onclick=function () {
                var id = document.getElementById("id").value;
                var name = document.getElementById("name").value;
                var gender = document.getElementById("gender").value;

            //    获取table
                var table = document.getElementsByTagName("table")[0];
                table.innerHTML+="<tr>\n" +
                    "                <td>"+id+"</td>\n" +
                    "                <td>"+name+"</td>\n" +
                    "                <td>"+gender+"</td>\n" +
                    "                <td><a href=\"javascript:void(0);\" onclick=\"delTr(this)\">删除</a></td>\n" +
                    "            </tr>"
            }

        //    删除部分
            function delTr(obj) {
                var table = obj.parentNode.parentNode.parentNode;
                var tr=obj.parentNode.parentNode;
                table.removeChild(tr);
            }
        </script>

Remember to like and follow, thank you for your support