39,113
社区成员




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<!-- 一。定义body里的元素,form》input -->
<!-- 定义form里的class为info -->
<form autocomplete="off" class="info">
<!-- 定义input的class,方便接下来的调用 -->
<input type="text" placeholder="姓名" class="uname">
<input type="text" placeholder="年龄" class="uage">
<input type="text" placeholder="薪资" class="usalary">
<!-- 定义select的class,方便接下来的调用 -->
<select name="usex" id="" class="usex">
<option value="男">男</option>
<option value="女">女</option>
</select>
<select name="ucity" id="" class="ucity">
<option value="北京">北京</option>
<option value="上海">上海</option>
</select>
<!-- 定义按钮,方便接下来添加arr -->
<button class="add" type="">添加</button>
</form>
<table>
<thead>
<tr>
<td>id</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>薪资</td>
<td>就业城市</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
/* 选择body中的一些元素 */
let tbody=document.querySelector("tbody");
let arr=[];
let info=document.querySelector(".info");
let uname=document.querySelector(".uname");
let uage=document.querySelector(".uage");
let usalary=document.querySelector(".usalary");
let usex=document.querySelector(".usex");
let ucity=document.querySelector(".ucity");
/* 定义全局变量,存储本地数据和读取本地数据。 */
let setlocalstorage;
let getlocalstorage;
/* 监听form 和子元素input ,监控项为submit*/
info.addEventListener("submit",function(e){
/* 阻止默认的跳转动作 */
e.preventDefault();
/* 不允许输入空元素 !这个需要调试,输入完了还是把空的内容添加到了arr里 */
if(!uname.value || !uage.value || !usalary.value){
alert(`no!`);
/* 重置info里的表格。 */
render();
this.reset();
};
/* 向arr数组添加元素 */
arr.push({id:arr.length+1,name:uname.value,age:uage.value,sex:usex.value,salary:usalary.value,city:ucity.value});
// arr.pop();
/* 将arr数组的内容存储到 本地,格式为字符串*/
setlocalstorage=localStorage.setItem("arr",JSON.stringify(arr));
/* 读取本地存储的arr,格式为对象 */
getlocalstorage=JSON.parse(localStorage.getItem("arr"));
/* 定义本地功能函数,将读取本地存储的内容,赋值给tbody的内容,让其形成表格。*/
function render(){
let newArr=getlocalstorage.map(function(ele,index){
return`<tr>
<td>${ele.id}</td>
<td>${ele.name}</td>
<td>${ele.age}</td>
<td>${ele.sex}</td>
<td>${ele.salary}</td>
<td>${ele.city}</td>
<td><button class="add" type="submit" data-id="${index}">删除</button><td>
</tr>`
})
tbody.innerHTML=newArr.join("");
}
/* 调用函数,否则函数不运行。 */
render();
/* 重置info项(输入项) */
// this.reset();
// tbody继承的调用 ,还是需要排查故障,因为点一个删两个·····
tbody.addEventListener("click",function(e){
if(e.target.tagName==="BUTTON"){
console.log(e.target.dataset.id);
arr.splice(e.target.dataset.id,1);
// // console.log(arr);
localStorage.setItem("arr",JSON.stringify(arr));
getlocalstorage=JSON.parse(localStorage.getItem("arr"));
render();
}
})
})
</script>
</body>
</html>