目录

一、功能说明

二、核心思想

三、所用知识回顾

四、基本框架

五、js功能实现部分

一、功能说明

（1）输入对应的信息，点击录入可以为下面的表格添加一条记录，注意当所填信息不完整时不允许进行提交。

（2）当点击删除记录的时候，对应的数据会从表中进行删除

二、核心思想

采取减少dom的操作，操作数据的形式，删除增加都是针对于数组

（1）声明一个空的数组

（2）点击录入，根据相关数据，生成都西昂，追加到数组中

（3）根据数组数据渲染页面-表格中的行

（4）点击删除按钮，删除数组中的对应数据

（5）再次根据数组中的数据，渲染页面

三、所用知识回顾

（1）阻止事件的默认行为  e.preventDefault()

（2）给数组增加元素 数组名.push(数据对象)

（3）从数组中删除数据  数组名.splice(从哪开始删，删几个)

（4）如何知道当前点击的是什么标签   e.target.tagName

（5）如何定义自定义属性  在标签中加入data-id='什么' ；用e.target.dataset.id获取自定义属性的id值

（6）如何创建结点  document.createElement（‘元素名’）

（7）如何给父元素追加结点   父元素.appendChild(要插入的元素)其为后插 ；父元素.insertBefore(要插入的元素)其为前插

（8）如何将内容渲染到标签中，用反引号``

四、基本框架

HTML部分

新增学员
姓名：年龄：性别:男女薪资：就业城市：北京上海广州深圳曹县录入
就业榜
学号
姓名
年龄
性别
薪资
就业城市
操作

CSS部分

* {margin: 0;padding: 0;
}a {text-decoration: none;color:#721c24;
}
h1 {text-align: center;color:#333;margin: 20px 0;}
table {margin:0 auto;width: 800px;border-collapse: collapse;color:#004085;
}
th {padding: 10px;background: #cfe5ff;font-size: 20px;font-weight: 400;
}
td,th {border:1px solid #b8daff;
}
td {padding:10px;color:#666;text-align: center;font-size: 16px;
}
tbody tr {background: #fff;
}
tbody tr:hover {background: #e1ecf8;
}
.info {width: 900px;margin: 50px auto;text-align: center;
}
.info  input, .info select {width: 80px;height: 27px;outline: none;border-radius: 5px;border:1px solid #b8daff;padding-left: 5px;box-sizing: border-box;margin-right: 15px;
}
.info button {width: 60px;height: 27px;background-color: #004085;outline: none;border: 0;color: #fff;cursor: pointer;border-radius: 5px;
}
.info .age {width: 50px;
}

五、js功能实现部分