文章目录
0.HTML+JS综合练习
1 项目概述
- 项目名称 : 人员信息管理系统
- 项目需求 : 利用现有技术对人员信息进行可视化管理
- 项目概述 :
假设需要对某行业人员信息进行管理,该行业人员信息数据样本如下
现因为人员管理较为复杂所以需要你使用HTML+CSS+JS技术完成对现有人员的
查询 添加 删除 修改 的数据管理
2 需求实现
2.1 样例展示
人员信息展示
2.2 步骤实现
2.2.1 数据查询 :
因为要存储过个对象信息而不是变量信息,所以有限考虑用一个JSON数组来保存要操作的数据;
对于查询来说其实就是通过一个按钮单击事件然后触发一个JS方法,读取数组数据,作为表格新的行列数据进行展示;
整理好之后的实现思路
- 我们先来写个页面:
- 编写JS脚本定义数据:
- 定义完数据之后我们要想办法进行展示,根据截图所知,此处需要一个table,然后动态拼接tr td来展示数据,所以我们先定义一个空table
- 定义完成后我们就开始编写一个按钮触发一个JS事件来加载数据,根据图中显示需要定义一个查询和一个添加按钮
- 根据按钮的单击事件开始写JS方法
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML案例</title>
<script type="text/javascript">
// 初始化数据开始
// 1. 很重要的一步 : 定义人员编号 编号是一串没有意义的数字,主要是为了方便人员管理用的
var id_index = 1; // 初始化
// 2. 添加初始化人员
var p1 = {"id":id_index,"name":"孙建国","sex":"男","age":35,"from":"北京市"};
// 3. 每次使用了编号索引别忘了让编号自加,这样人员编号都不一样,方便管理,就和我们身份证号一个道理
id_index++;
// 添加初始化人员
var p2 = {"id":id_index,"name":"赵文明","sex":"男","age":24,"from":"河北省"};
// 每次使用了编号索引别忘了让编号自加,这样人员编号都不一样,方便管理,就和我们身份证号一个道理
id_index++;
// 为了方便操作者两个数据,我们把数据封装在一个数组中
var persons = [p1,p2];
// 初始化数据结束
// 编写显示人员方法
function showPersons(){
// 按ID获取table
var tb1 = document.getElementById("tb1");
// 给tb1拼接元素
var str = "<tr><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>籍贯</th></tr>";
// 遍历JSON数组继续拼接
for (var i = 0; i < persons.length; i++) {
var p = persons[i];
str += "<tr><td>"+p.id+"</td><td>"+p.name+"</td><td>"+p.sex+"</td><td>"+p.age+"</td><td>"+p.from+"</td></tr>";
}
// 最后把拼接好的字符串放入table中
tb1.innerHTML = str;
}
</script>
</head>
<body>
<div>
<button type="button" onclick="showPersons();">显示人员数据</button>
<button type="button" onclick="showAddForm();">添加新人员</button>
</div>
<div>
<table border="1" id="tb1">
</table>
</div>
</body>
</html>
到此 人员数据的展示工作全部完毕,此处大家需要熟练掌握页面元素的字符串拼接问题,这个在以后操作JS的时候非常常用!
2.2.2 数据添加 :
添加其实就非常简单了,主要是接收用户输入,然后把用户输入的内容组成一个新的JSON对象放入数组中然后调用查询方法重新加载一个数组数据,就可以看到你刚才添加的数据了
添加实现步骤如下:
首先添加需要接收用户输入,所以我们需要定义一个表单接收用户输入,但是为了让我们的表单更加美化,我们决定用
fieldset给form添加一个表单域,这样表单会有一个边框下过,然后用legend配上说明文字,这样边框会有一个标题开起来会好看一些
代码 :
<div id="form1">
<form>
<fieldset>
<legend>添加人员信息</legend>
</fieldset>
</form>
</div>
创建完表单后我们就可以丰富一下表单内容了
代码 :
<div id="form1">
<form>
<fieldset>
<legend>添加人员信息</legend>
<table>
<tr>
<td>姓名:</td>
<td>
<input type="text" id="pname" required="required" placeholder="请输入人员姓名......" />
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<select id="sex" required="required">
<option value="">---请选择---</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
</td>
</tr>
<tr>
<td>年龄:</td>
<td>
<input type="number" id="age" required="required" placeholder="请输入人员年龄......" />
</td>
</tr>
<tr>
<td>籍贯:</td>
<td>
<input type="text" id="pfrom" required="required" placeholder="请输入人员籍贯......" />
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit">确定</button>
<button type="reset">取消</button>
</td>
</tr>
</table>
</fieldset>
</form>
</div>
此处我们需要提交表单才能获取信息,所以提交表单的方法是在form上加onsubmit方法
<form action="#" method="post" onsubmit="addPerson();" >
此处action属性设置提交地址,因为我们没有什么地址可以提交(一会儿我们用JS处理数据),所以此处设置为# 代表当前地址不可用;
method属性代表提交方式 我们选用post方式
onsubmit方法执行处理请求的JS方法
注意 : 表单的数据获取方式必须是表单提交获取里面的数据,但是我们又没有学习服务器技术,所以此处只能这样设置,后期我们会把数据提交给具体处理请求的服务器,现在我们只能拿JS先对付着
// 编写添加方法
function addPerson(){
// 接收页面数据
var pname = document.getElementById("pname");
var sex = document.getElementById("sex");
var age = document.getElementById("age");
var pfrom = document.getElementById("pfrom");
// 获取这个对象的主键信息
var id = id_index;
// 主键用过就自增
id_index++;
// 开始添加数据
var p = {"id":id,"name":pname.value,"sex":sex.value,"age":age.value,"from":pfrom.value};
// 添加到数组
persons.push(p);
// 因为数组数据发生了改变,重新调用查询方法刷新页面显示
showPersons();
}
JS写完之后进行联动测试
页面添加数据
根据我们理解此时我们已经添加了数据,如果成功的话应该是直接添加到上面的表格中,点击确定看下效果
点击确定后出现了这个
这个错误是提示你你的表单提交了但是地址不正确
诶这就很奇怪了呀,我们明明指定了JS方法它为什么还这么干呢?
这就是表单的特性了,页面只要发现表单点击了提交按钮,不管三七二十几都会把表单按照action中设置的地址进行提交;
这样就很尴尬了,我们能不能阻止表单提交呢? 完全可以!
<form method="post" action="#" onsubmit="addPerson();return false;" >
在onsubmit方法里面添加一个return false;这样页面就会认为这个表单还没有完成操作,所以就不会提交了,这是一种欺骗页面的手段;
从新刷新页面看下效果:
怎么样,页面是不是被我们欺骗住了;
2.2.3 数据添加优化 :
需求1 : 添加的form需要点击 “添加新人员” 按钮再显示
编程:
冷静的分析一波需求我们可以知道,用户需要点击按钮出现添加对话框,当然当我点击取消按钮的时候肯定也是希望这个对话框消失的;
所以整理好需求之后,我们得到了下面的实现步骤
- 先设置表单在页面加载的时候不显示
<div id="form1" style="display: none;">
此处我们用style属性来设置元素在页面的显示 display:none 表示该页面元素隐藏,所以加完这个属性之后页面是这样的
2. 编写显示form的JS方法
// 显示添加表单
function showAddForm(){
// 获取添加表单
var form1 = document.getElementById("form1");
// 设置form1的属性为显示 因为标签本来就是可以显示的 我们只要把display的属性值去掉即可
form1.style.display = "";
}
- 验证效果
没点的时候
- 点击取消,让form表单继续隐藏,当然此处我们应该有个程序员眼光,这个隐藏form表单的方法一会做更新的时候也会用,所以我们写个通用的
// 根据ID隐藏form表单
function hideForm(formid){
// 按ID获取这个form
var form = document.getElementById(formid);
// 设置form表单的显示属性为隐藏
form.style.display = "none";
}
- 在取消按钮上添加这个方法
<button type="reset" onclick="hideForm('form1');">取消</button>
- 验证效果
页面加载的时候
正常添加
点击取消
到此,添加功能全部实现
实现代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML案例</title>
<script type="text/javascript">
// 初始化数据开始
// 1. 很重要的一步 : 定义人员编号 编号是一串没有意义的数字,主要是为了方便人员管理用的
var id_index = 1; // 初始化
// 2. 添加初始化人员
var p1 = {"id":id_index,"name":"孙建国","sex":"男","age":35,"from":"北京市"};
// 3. 每次使用了编号索引别忘了让编号自加,这样人员编号都不一样,方便管理,就和我们身份证号一个道理
id_index++;
// 添加初始化人员
var p2 = {"id":id_index,"name":"赵文明","sex":"男","age":24,"from":"河北省"};
// 每次使用了编号索引别忘了让编号自加,这样人员编号都不一样,方便管理,就和我们身份证号一个道理
id_index++;
// 为了方便操作者两个数据,我们把数据封装在一个数组中
var persons = [p1,p2];
// 初始化数据结束
// 编写显示人员方法
function showPersons(){
// 按ID获取table
var tb1 = document.getElementById("tb1");
// 给tb1拼接元素
var str = "<tr><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>籍贯</th></tr>";
// 遍历JSON数组继续拼接
for (var i = 0; i < persons.length; i++) {
var p = persons[i];
str += "<tr><td>"+p.id+"</td><td>"+p.name+"</td><td>"+p.sex+"</td><td>"+p.age+"</td><td>"+p.from+"</td></tr>";
}
// 最后把拼接好的字符串放入table中
tb1.innerHTML = str;
}
// 编写添加方法
function addPerson(){
// 接收页面数据
var pname = document.getElementById("pname");
var sex = document.getElementById("sex");
var age = document.getElementById("age");
var pfrom = document.getElementById("pfrom");
// 获取这个对象的主键信息
var id = id_index;
// 主键用过就自增
id_index++;
// 开始添加数据
var p = {"id":id,"name":pname.value,"sex":sex.value,"age":age.value,"from":pfrom.value};
// 添加到数组
persons.push(p);
// 因为数组数据发生了改变,重新调用查询方法刷新页面显示
showPersons();
}
// 显示添加表单
function showAddForm(){
// 获取添加表单
var form1 = document.getElementById("form1");
// 设置form1的属性为显示 因为标签本来就是可以显示的 我们只要把display的属性值去掉即可
form1.style.display = "";
}
// 根据ID隐藏form表单
function hideForm(formid){
// 按ID获取这个form
var form = document.getElementById(formid);
// 设置form表单的显示属性为隐藏
form.style.display = "none";
}
</script>
</head>
<body>
<div>
<button type="button" onclick="showPersons();">显示人员数据</button>
<button type="button" onclick="showAddForm();">添加新人员</button>
</div>
<div>
<table border="1" id="tb1">
</table>
</div>
<div id="form1" style="display: none;">
<form method="post" action="#" onsubmit="addPerson();return false;" >
<fieldset>
<legend>添加人员信息</legend>
<table>
<tr>
<td>姓名:</td>
<td>
<input type="text" id="pname" required="required" placeholder="请输入人员姓名......" />
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<select id="sex" required="required">
<option value="">---请选择---</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
</td>
</tr>
<tr>
<td>年龄:</td>
<td>
<input type="number" id="age" required="required" placeholder="请输入人员年龄......" />
</td>
</tr>
<tr>
<td>籍贯:</td>
<td>
<input type="text" id="pfrom" required="required" placeholder="请输入人员籍贯......" />
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit">确定</button>
<button type="reset" onclick="hideForm('form1');">取消</button>
</td>
</tr>
</table>
</fieldset>
</form>
</div>
</body>
</html>
2.2.4 数据删除 :
先观察删除效果
删除效果是在每个数据的后面加一个操作,然后添加删除和更新按钮
接下来点击那个数据后面的删除按钮就删除那个数据;
这里有几个问题 :
- 我们没有这两个按钮?
- 删除一条数据的依据是什么?
问题解决 :
构建这两个按钮,只需要在查询方法中补充列即可
// 编写显示人员方法
function showPersons(){
// 按ID获取table
var tb1 = document.getElementById("tb1");
// 给tb1拼接元素
var str = "<tr><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>籍贯</th><th>操作</th></tr>";
// 遍历JSON数组继续拼接
for (var i = 0; i < persons.length; i++) {
var p = persons[i];
str += "<tr><td>"+p.id+"</td><td>"+p.name+"</td><td>"+p.sex+"</td><td>"+p.age+"</td><td>"+p.from+"</td><th><button type='button'>更新</button>||<button type='button'>删除</button></th></tr>";
}
// 最后把拼接好的字符串放入table中
tb1.innerHTML = str;
}
解决第二个问题,删除的依据是什么?
我们可以先观察数据,比如这两条数据都是存在JSON数组里,我们需要找到要删除的数据才能删除
但是如果按名称或者性别或者年龄或者籍贯都有可能找到很多重复数据,所以此处我们用不会重复的编号来精确锁定数据
修改一下删除的button
<button type='button' onclick='deletePerson("+p.id+")'>删除</button>
此处需要注意,因为我们是在字符串里写这些东西,一对双引号里面是不允许再次出现双引号的,所以此处双引号的地方我们都是用单引号代替的!
修改好了之后我们就得到了一个deletePerson(id)方法实现它!
// 根据ID删除指定数据
function deletePerson(pid){
// 先有情提示一下
var con = window.confirm("确定要删除这条数据么?");
// 判断一下
if(con == true){
// 找到要删除的数据 删除
for (var i = 0; i < persons.length; i++) {
if(persons[i].id == pid){
delete persons[i];
}
}
// 删除后需要去下null值
for(var i = 0;i<persons.length;i++){
if(persons[i]==''||persons[i]==null||typeof(persons[i])==undefined){
persons.splice(i,1);
i=i-1;
}
}
// 因为数据发生改变,需要刷新下数组数据的展示
showPersons();
}
}
此处我们在删除空元素的时候使用了一个数组的splice()方法
JavaScript splice() 方法
1.定义和用法
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
注释：该方法会改变原始数组。
2. 语法
arrayObject.splice(index,howmany,item1,…,itemX)
3. 返回值
4. 说明
splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。
5. 实例:
for(var i = 0;i<persons.length;i++){
if(persons[i]==''||persons[i]==null||typeof(persons[i])==undefined){
persons.splice(i,1);
i=i-1;
}
}
此处需要简单注意下 i = i-1 是为了配置已经缩短长度的数组,就好比现在验证的是索引=2的数据,一看是null 删除了,然后你再次验证不能从索引3的开始,必须再验证一遍索引为2的数据,这样才能保证数据的正确;
到此,删除方法实现完成!
2.2.5 数据更新 :
更来相对其他三个操作难度稍微大了一些,因为更新分两部分进行,
第一部分 需要把要更新的数据展示出来
第二部分 在展示出来的数据基础上进行数据更新
所以先完成第一部分 : 数据展示工作
数据最终要展示到页面,所以我们先构建页面,此处我们可以把form1稍微修改一下就编程了一个更新展示页面
<div id="form2" style="display: none;">
<form method="post" action="#" onsubmit="updatePerson();return false;">
<input type="hidden" id="upid" />
<fieldset>
<legend>添加人员信息</legend>
<table>
<tr>
<td>姓名:</td>
<td>
<input type="text" id="upname" required="required" placeholder="请输入人员姓名......" />
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<select id="usex" required="required">
<option value="">---请选择---</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
</td>
</tr>
<tr>
<td>年龄:</td>
<td>
<input type="number" id="uage" required="required" placeholder="请输入人员年龄......" />
</td>
</tr>
<tr>
<td>籍贯:</td>
<td>
<input type="text" id="upfrom" required="required" placeholder="请输入人员籍贯......" />
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit">确定</button>
<button type="reset" onclick="hideForm('form2');">取消</button>
</td>
</tr>
</table>
</fieldset>
</form>
</div>
展示数据的时候需要注意,我们展示的数据是有id编号的,所以这个属性也必须接收到,但是ID我们又不希望用户修改,所以此处我们用隐藏域保存数据;
写完页面之后我们在编写JS方法展示数据
先修改更新的button 加入JS方法
<button type='button' onclick='showUpdateForm("+p.id+");' >更新</button>
编写这个方法
// 显示数据方法
function showUpdateForm(pid){
// 找到要更新的数据
for (var i = 0; i < persons.length; i++) {
if(persons[i].id == pid){
var p = persons[i];
// 将获取到的数据显示到form表单中的元素
document.getElementById("upid").value = p.id;
document.getElementById("upname").value = p.name;
document.getElementById("uage").value = p.age;
document.getElementById("usex").value = p.sex;
document.getElementById("upfrom").value = p.from;
// 显示form
document.getElementById("form2").style.display = "";
}
}
}
效果 :
到这 更新的第一步就算完事了
再继续第二步根据更新的JS完成操作
// 数据更新JS
function updatePerson(){
// 获取页面数据
var p = {};
p.id = document.getElementById("upid").value;
p.name = document.getElementById("upname").value;
p.age = document.getElementById("uage").value;
p.sex = document.getElementById("usex").value;
p.from = document.getElementById("upfrom").value;
// 开始更新
for (var i = 0; i < persons.length; i++) {
if(persons[i].id == p.id){
persons[i] = p;
}
}
// 因为数据发生了改动,所以重新刷新下数据展示
showPersons();
}
效果:
更新赵文明的数据
至此,页面级别的增删改查数据全部完成;
最终代码
法一：标准方法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML案例</title>
<script type="text/javascript">
// 【初始化】数据开始
// 1. 很重要的一步 : 定义人员编号 编号是一串没有意义的数字,主要是为了方便人员管理用的
var id_index = 1;
// 初始化
// 2. 添加初始化人员1
var p1 = {"id":id_index,"name":"孙建国","sex":"男","age":35,"from":"北京市"};
// 3. 每次使用了编号索引别忘了让编号自加,这样人员编号都不一样,方便管理,就和我们身份证号一个道理
id_index++;
// 添加初始化人员2
var p2 = {"id":id_index,"name":"赵文明","sex":"男","age":24,"from":"河北省"};
// 每次使用了编号索引别忘了让编号自加,这样人员编号都不一样,方便管理,就和我们身份证号一个道理
id_index++;
// 为了方便操作者两个数据,我们把数据封装在一个数组中
var persons = [p1,p2];
// 初始化数据结束
// 编写【显示】人员方法
function showPersons(){
// 按ID获取table
var tb1 = document.getElementById("tb1");
// 给tb1拼接元素
var str = "<tr><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>籍贯</th><th>操作</th></tr>";
// 遍历JSON数组继续拼接
for (var i = 0; i < persons.length; i++) {
var p = persons[i];
str += "<tr><td>"+p.id+"</td><td>"+p.name+"</td><td>"+p.sex+"</td><td>"+p.age+"</td><td>"+p.from+"</td><th><button type='button' οnclick='showUpdateForm("+p.id+");' >更新</button>||<button type='button' οnclick='deletePerson("+p.id+")'>删除</button></th></tr>";
}
// 最后把拼接好的字符串放入table中
tb1.innerHTML = str;
}
// 编写【添加】方法
function addPerson(){
// 接收页面数据
var pname = document.getElementById("pname");
var sex = document.getElementById("sex");
var age = document.getElementById("age");
var pfrom = document.getElementById("pfrom");
// 获取这个对象的主键信息
var id = id_index;
// 主键用过就自增
id_index++;
// 开始添加数据
var p = {"id":id,"name":pname.value,"sex":sex.value,"age":age.value,"from":pfrom.value};
// 添加到数组
persons.push(p);
// 因为数组数据发生了改变,重新调用查询方法刷新页面显示
showPersons();
}
// 【显示添加表单】
function showAddForm(){
// 获取添加表单
var form1 = document.getElementById("form1");
// 设置form1的属性为显示 因为标签本来就是可以显示的 我们只要把display的属性值去掉即可
form1.style.display = "";
}
// 根据ID【隐藏】form表单
function hideForm(formid){
// 按ID获取这个form
var form = document.getElementById(formid);
// 设置form表单的显示属性为隐藏
form.style.display = "none";
}
// 根据ID【删除】指定数据
function deletePerson(pid){
// 先有情提示一下
var con = window.confirm("确定要删除这条数据么?");
// 判断一下
if(con == true){
// 找到要删除的数据 删除
for (var i = 0; i < persons.length; i++) {
if(persons[i].id == pid){
delete persons[i];
}
}
// 删除后需要去下null值
for(var i = 0;i<persons.length;i++){
if(persons[i]==''||persons[i]==null||typeof(persons[i])==undefined){
persons.splice(i,1);
i=i-1;
}
}
// 因为数据发生改变,需要刷新下数组数据的展示
showPersons();
}
}
// 【显示】数据方法
function showUpdateForm(pid){
// 找到要更新的数据
for (var i = 0; i < persons.length; i++) {
if(persons[i].id == pid){
var p = persons[i];
// 将获取到的数据显示到form表单中的元素
document.getElementById("upid").value = p.id;
document.getElementById("upname").value = p.name;
document.getElementById("uage").value = p.age;
document.getElementById("usex").value = p.sex;
document.getElementById("upfrom").value = p.from;
// 显示form
document.getElementById("form2").style.display = "";
}
}
}
// 数据【更新】JS
function updatePerson(){
// 获取页面数据
var p = {};
p.id = document.getElementById("upid").value;
p.name = document.getElementById("upname").value;
p.age = document.getElementById("uage").value;
p.sex = document.getElementById("usex").value;
p.from = document.getElementById("upfrom").value;
// 开始更新
for (var i = 0; i < persons.length; i++) {
if(persons[i].id == p.id){
persons[i] = p;
}
}
// 因为数据发生了改动,所以重新刷新下数据展示
showPersons();
}
</script>
</head>
<body>
<div>
<button type="button" onclick="showPersons();">显示人员数据</button>
<button type="button" onclick="showAddForm();">添加新人员</button>
</div>
<div>
<table border="1" id="tb1">
</table>
</div>
<!-- 添加数据 -->
<div id="form1" style="display: none;">
<form method="post" action="#" onsubmit="addPerson();return false;" >
<fieldset>
<legend>添加人员信息</legend>
<table>
<tr>
<td>姓名:</td>
<td>
<input type="text" id="pname" required="required" placeholder="请输入人员姓名......" />
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<select id="sex" required="required">
<option value="">---请选择---</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
</td>
</tr>
<tr>
<td>年龄:</td>
<td>
<input type="number" id="age" required="required" placeholder="请输入人员年龄......" />
</td>
</tr>
<tr>
<td>籍贯:</td>
<td>
<input type="text" id="pfrom" required="required" placeholder="请输入人员籍贯......" />
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit">确定</button>
<button type="reset" onclick="hideForm('form1');">取消</button>
</td>
</tr>
</table>
</fieldset>
</form>
</div>
<!-- 更新数据 -->
<div id="form2" style="display: none;">
<form method="post" action="#" onsubmit="updatePerson();return false;">
<input type="hidden" id="upid" />
<fieldset>
<legend>添加人员信息</legend>
<table>
<tr>
<td>姓名:</td>
<td>
<input type="text" id="upname" required="required" placeholder="请输入人员姓名......" />
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<select id="usex" required="required">
<option value="">---请选择---</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
</td>
</tr>
<tr>
<td>年龄:</td>
<td>
<input type="number" id="uage" required="required" placeholder="请输入人员年龄......" />
</td>
</tr>
<tr>
<td>籍贯:</td>
<td>
<input type="text" id="upfrom" required="required" placeholder="请输入人员籍贯......" />
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit">确定</button>
<button type="reset" onclick="hideForm('form2');">取消</button>
</td>
</tr>
</table>
</fieldset>
</form>
</div>
</body>
</html>
法二：格式变换，核心不变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var index = 1;
var p1 = {
"id":index,
"name":"孙建国",
"sex":"男",
"age":24,
"from":"北京"
};
index++;
var p2 = {
"id":index,
"name":"赵文明",
"sex":"男",
"age":25,
"from":"河北"
};
index++;
var ps = [];
ps.push(p1);
ps.push(p2);
function showPersons(){
var d1= document.getElementById("d1");
d1.style.display = "";
var str = "<tr><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>籍贯</th><th>操作</th></tr>"
for(var i = 0;i<var.length;i++){
var p = ps[i];
str+="<tr><th>"+p.id+"</th><th>"+p.name+"</th><th>"+p.sex+"</th><th>"+p.age+"</th><th>"+p.from+"</th><th>操作</th></tr>"
}
}
var t1 = document.getElementById()
function showAddFrom(){
var form1 = document.getElementById("from1");
from1.style.display= "";
}
function addPerson{
}
</script>
</head>
<body>
<input type="button" value="显示人员信息" onclick="showPersons()"/>
<input type="button" value="新增人员信息" onclick="showAddFrom()"/>
<hr >
<div id="d1" style="display: none;">
<table border="1" width="500">
<tr><td>index</td><td>孙建国</td><td>男</td><td>22</td><td>北京</td><td>删除||更新</td></tr>
</table>
</div>
<div id="from1" style="display: none;">
<form action="#" method="post">
<fieldset id="">
<legend>新增人员信息</legend>
请输入人员姓名：<input type="text" name="name" placeholder="请输入人员姓名" required="required"/><br>
请输入人员年龄：<input type="number" name="age" placeholder="请输入人员年龄" required="required"/><br>
请输入人员性别：<select type="sex">
<option value ="">请选择</option>
<option value ="男">男</option>
<option value ="女">女</option>
</select><br>
请输入人员籍贯：<input type="text" name="from" placeholder="请输入人员籍贯" required="required"/><br>
<input type="submit" value="确定" />
<input type="button" value="取消" /><br>
</fieldset>
</form>
</body>
</html>
5639
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
