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

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

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

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

分析：

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+="\n" +
                    "                "+id+"\n" +
                    "                "+name+"\n" +
                    "                "+gender+"\n" +
                    "                删除\n" +
                    "            "
            }

是不是很少代码量。

注意：在table.innerHTML后是   +=

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

css代码：

html结构代码：

学生信息表
        

            
            
            
            
            
        
        

            

                
编号
                
姓名
                
性别
                
操作
            
            

                
1
                
孙悟空
                
男
                
删除
            
            

                
2
                
猪八戒
                
男
                
删除
            
            

                
3
                
嫦娥
                
女
                
删除
            
        

JavaScript代码：

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