<div>
<label>
姓名:<input type="text" id="username"/>
</label>
</div>
<div>
性别:
<label>
<input type="radio" name="sex" value="0" checked/> 男
<input type="radio" name="sex" value="1"/> 女
</label>
</div>
<div>
年龄:<input type="number" id="age"/>
</div>
<div>
<button id="add">添加</button>
</div>
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>头像</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!--<tr>
<td>1</td>
<td><img src="img/1.jpeg"/></td>
<td>萨达</td>
<td>男</td>
<td>21</td>
<td>2021年9月9日14:14:26</td>
<td><button>删除</button></td>
</tr>-->
</tbody>
</table>
<span class="pp">
暂无数据
</span>
</div>
<script type="text/javascript">
//获取Dom
var imgs = document.querySelectorAll("#d1>img");
var username = document.querySelector("#username");
var sexs = document.querySelectorAll("input[type='radio']")
var age = document.querySelector("#age");
var add = document.querySelector("#add");
var tbody = document.querySelector("tbody");
var pp = document.querySelector(".pp");
var table = document.querySelector("table");
//本地存储
if(localStorage.arr99){
var arr = JSON.parse(localStorage.arr99);
}else{
var arr = [];
localStorage.arr99 = JSON.stringify([]);
}
show(arr);
//图片切换
var imgSrc = '';
for(var i=0; i<imgs.length; i++){
imgs[i].onclick = function(){
for(var i=0; i<imgs.length; i++){
imgs[i].style.border = "";
}
this.style.border = "2px solid black"
imgSrc = this.getAttribute("src");
}
}
//获取性别值
function getSex(){
for(var i=0; i<sexs.length; i++){
if(sexs[i].checked){
return sexs[i].value;
}
}
}
//渲染性别值
function SexFn(value){
var arr1 = ["男","女"];
return arr1[value];
}
//时间渲染
function getTime(){
var d = new Date();
return d.getFullYear()+"-"+
numFn(d.getMonth()+1)+"-"+
numFn(d.getDate())+" "+
numFn(d.getHours())+":"+
numFn(d.getMinutes())+":"+
numFn(d.getSeconds())
}
//补零
function numFn(num){
return num>9 ? num : "0"+num;
}
//添加
add.onclick = function(){
if(!username.value){
alert("请输入姓名")
return;
}else if(!age.value){
alert("请输入年龄")
return;
}else if(imgSrc == ''){
alert("请选择头像");
username.value = age.value = "";
return;
}
arr.push({
img : imgSrc,
username : username.value,
sex : getSex(),
age : age.value,
time : getTime(),
id : new Date().getTime()
})
for(var i=0; i<imgs.length; i++){
imgs[i].style.border = "";
}
imgSrc = '';
sexs[0].checked = true;
username.value = age.value = "";
localStorage.arr99 = JSON.stringify(arr);
show(arr);
}
//渲染
function show(arr){
if(arr.length == 0){
pp.style.display = "block";
table.style.display = "none";
}else{
pp.style.display = "none";
table.style.display = "table";
}
tbody.innerHTML = '';
for(var i=0; i<arr.length; i++){
tbody.innerHTML +=`
<tr>
<td>${i+1}</td>
<td><img src="${arr[i].img}"/></td>
<td>${arr[i].username}</td>
<td>${SexFn(arr[i].sex)}</td>
<td>${arr[i].age}</td>
<td>${arr[i].time}</td>
<td><button onclick = "delFn(${arr[i].id})">删除</button></td>
</tr>
`;
}
}
//删除
function delFn(id){
for(var i=0; i<arr.length; i++){
if(arr[i].id == id){
arr.splice(i,1);
}
}
localStorage.arr99 = JSON.stringify(arr);
show(arr);
}
</script>
</body>
哪一块啊?
一部分一部分功能说啊。
静态页面没法保存状态,新增这种需要向后端提交表单,然后刷新显示。
删除也是一样的道理,根据某个唯一字段提交表单,后端处理,然后reload
建议自己做,直接给代码,对你没任何帮助