黑马程序员-动态表格（升级版）

黑马程序员-动态表格（升级版）

首先，感谢大家的支持。话不多说，下面进入正题。

相信大家都已经敲过了动态表格，有没有感觉到代码冗余太多，一不小心就敲错了，今天来给大家分享一下简化的方式，首先看下整体效果：

分析：

1. 前面提到的方法，主要就是重复的代码太多。 
2. 尤其是在不停的创建节点

解决：

1. 利用HTML DOM对象先来获取输入框的内容
2. 将输入框的内容直接添加到table末尾

先来看下添加部分的代码：

<!--     添加  -->
            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>"
            }

是不是很少代码量。

注意：在table.innerHTML后是   +=

意思是：在原有的表格基础上再添加新内容，如果缺少了    +  那么添加以后原来的内容将会消失。说白了只有”=“号，就是“替换”。

css代码：

<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结构代码：

<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代码：

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

记得点赞关注呀，感谢大家支持