一、知识体系：
二、案例整理：
（1）需求：
实现学生的信息录入
可以实现一个个添加，也可删除
（2）知识点整理：
查找元素：
document.getElementById("submit");（按照元素的id查找）
document.getElementsByTagName('input');（按照元素名进行查找） 箭头函数： let myFunction = (a, b) => a * b;（使函数书写更加简洁） 内置console： console.log()在控制台打印信息 console.error（）提示错误 console.warn()发出警告 声明方式： var：全局作用域 let：可以重新赋值 const（常量）：不能改动，不能重新赋值（使用时要有初值，不然会报错） 迭代数组的方法： forEach + map （迭代器，这两种方法都可以让我们从数组中创建新的数组） filter方法（选择器，可以根据条件创建新数组） for循环语句： for (语句 1; 语句 2; 语句 3) { 要执行的代码块 } 条件语句： 单条件语句： if（）{} elseif（）{} else（） 多条件语句： if（xxxx||yyyy）{} （3）代码数据：<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name ="viewport" content = "width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="stdtab">
<div class="input_info">
<fieldset>
<legend>学生录入系统</legend>
<ul>
<li>
<label for="std_name">姓名：</label>
<input type="text" name="std_name" id="std_name">
</li>
<li>
<label for="std_gender">性别：</label>
<select name="std_gender" id="std_gender">
<option value="男">男</option>
<option value="女">女</option>
</select>
</li>
<li>
<label for="std_age">年龄：</label>
<input type="text" name="std_age" id="std_age">
</li>
<li>
<label for="std_number">学号：</label>
<input type="text" name="std_number" id="std_number">
</li>
</ul>
<button id ='submit'>提交</button>
</fieldset>
</div>
<div class = "show_info">
<table border="1" cellspacing="0" bordercolor="#888">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>学号</th>
<th>删除</th>
</tr>
</thead>
<tbody id="infos"></tbody>
</table>
</div>
</div>
<script src ="main.js"></script>
</body>
</html>
css：
body li{
list-style: none;
}
body .stdtab .input_info{
margin: 10px 0;
}
body .stdtab .input_info fieldset{
width: 400px;
}
body .stdtab .input_info fieldset button{
width: 60px;
height: 30px;
margin: 5px auto;
display: block;
}
body .stdtab .show_info .thead{
background-color: aquamarine;
}
body .stdtab .show_info .th{
width: 80px;
height: 30px;
}
body .stdtab .show_info .delete_{
color: #fc0404;
}
js部分：
let submitBtn = document.getElementById("submit");;
let inputs = document.getElementsByTagName('input');
let gender = document.getElementById('std_gender');
let tbody = document.getElementsByTagName('tbody')[0];
let dataArr = [];
submitBtn.addEventListener('click',() =>{
dataArr.push({
name:inputs[0].value,
gender:gender.value,
age:inputs[1].value,
number:inputs[2].value,
index:dataArr.length
});
console.log(dataArr);
let infos = '';
dataArr.forEach((item) =>{
infos = infos + `<tr class="info" index="${item.index}">
<th>${item.name}</th>
<th>${item.gender}</th>
<th>${item.age}</th>
<th>${item.number}</th>
<th class="delete" onclick = "del(${item.index})">删除</th>
</tr >`;
})
tbody.innerHTML = infos;
inputs[0].value = "";
})
function del(index){
let fidx = dataArr.findIndex(item =>{
return item.index ==index;
})
console.log(fidx);
dataArr.splice(fidx,1);
console.log(dataArr);
let info = document.getElementsByClassName("info");
for (let i= 0;i <info.length;i++){
let infoIdx = info[i].getAttribute("index");
if (infoIdx ==index){
console.log(info);
tbody.removeChild(info[i]);
}
}
}
（4）效果展示：
标签：info,知识点,console,body,dataArr,Javerscript,item,let,整理 From： https://www.cnblogs.com/songnienie/p/17842727.html