html代码:
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<style>
.table{
border-collapse: collapse;
width: 100%;
text-align: center;
}
.table th, table td{
border: 1px solid black;
}
#editOk{
display: none;
}
</style>
</head>
<body>
<h1>学员信息管理系统</h1>
<!-- 录入 -->
<form >
<div>
<label for="">姓名:</label>
<input type="text" name="" id="user">
</div>
<div>
<label for="">性别:</label>
<span>男</span> <input type="radio" name="sex" value="男" checked>
<span>女</span> <input type="radio" name="sex" value="女">
</div>
<div>
<label for="">籍贯:</label>
<select name="" id="address">
<option value="陕西">陕西省</option>
<option value="山西">山西省</option>
<option value="河南">河南省</option>
<option value="河北">河北省</option>
</select>
</div>
<div>
<label for="">爱好:</label>
<span>篮球</span> <input type="checkbox" name="hobby" value="看代码">
<span>足球</span> <input type="checkbox" name="hobby" value="抄代码">
<span>喝酒</span> <input type="checkbox" name="hobby" value="写代码">
</div>
<div>
<label for="">介绍:</label>
<textarea name="" id="msg" cols="30" rows="1"></textarea>
</div>
<div>
<input type="button" value="提交" id="add">
<input type="button" value="确认修改" id="editOk">
</div>
</form>
<hr/>
<!-- 展示 -->
<table class="table">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>爱好</th>
<th>籍贯</th>
<th>个人介绍</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
<!-- <tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>爱好</td>
<td>籍贯</td>
<td>个人介绍</td>
<td>
<button>删除</button>
<button>修改</button>
</td>
</tr> -->
</tbody>
</table>
<script src="./students.js"></script>
</body>
</html>JavaScript代码:
// c create 创建 增
// u update 修改 改
// r read 读取 查
// d delete 删除 删
// 1、-------------------------------模拟数据----------------------------------------------
// var arr=[
// // {
// // "id":1,
// // "user":"gao",
// // "sex":"女",
// // "hobby":['看代码','写代码'],
// // "address":"陕西",
// // "msg":"人人皆可成才",
// // },
// ]
//setItem( key,value ) value 会自动转为字符串,所以需要:JSON 对象 -- 转为 JSON 字符串 JSON.stringify()
var arr= localStorage.getItem("p20610") ? JSON.parse(localStorage.getItem("p20610") ).info :[];
// 获取 dom 元素
var addDom=document.getElementById("add");
var editOkDom=document.getElementById("editOk");
var userDom=document.getElementById("user");
var sexDom=document.getElementsByName("sex");
var addressDom=document.getElementById("address");
var hobbyDom=document.getElementsByName("hobby");
var msgDom=document.getElementById("msg");
// 2、 --------------渲染:通过字符串拼接,将样式写入html----------------------------------
function show( xx ){
var str="";
for(var i=0;i<xx.length;i++){
str+=`
<tr>
<td>${i+1}</td>
<td>${xx[i].user}</td>
<td>${xx[i].sex}</td>
<td>${xx[i].hobby.join("-") }</td>
<td>${xx[i].address}</td>
<td>${xx[i].msg}</td>
<td>
<button onclick="del(${i})">删除</button>
<button onclick="edit(${i})">修改</button>
</td>
</tr>
`
}
document.getElementById("tbody").innerHTML=str;
}
show(arr);
// 3、 ------------------事件操作----------------
// ----------------------添加功能 -------------------------
addDom.onclick=function(){//通过添加按钮绑定点击事件
//-------------姓名-----------------
var user=userDom.value;
//-------------性别-----------------
var sex ;
for(var i =0;i<sexDom.length;i++){
if(sexDom[i].checked == true){
sex= sexDom[i].value;
}
}
//-------------地址-----------------
var address= addressDom.value;
var hobby=[];
for(var j=0;j<hobbyDom.length;j++){
if(hobbyDom[j].checked == true){
hobby.push( hobbyDom[j].value )
}
}
//-------------个人介绍-----------------
var msg=msgDom.value;
//-------------非空验证-----------------
//--判断姓名/性别/爱好/地址/个人说明任何一个都不能空
if(user && sex && hobby.length>0 && address && msg){
var obj={
"id":new Date().getTime(),
"user":user,
"sex":sex,
"hobby":hobby,
"address":address,
"msg":msg,
}
//--把一个人的信息以对象形式加入push到数组中----------------
arr.push(obj);
//--加数组中后,并保存数据----------------
localStorage.setItem("p20610",JSON.stringify( { "info":arr } ))
//--保存数据后再次数据拼接渲染到页面html--show()函数----------------
show(arr);
}else{
alert("不能为空");
}
}
//-------------删除功能----------------
function del(index){
//--数组删除splice(参数1,参数2)参数1位删除的下标,参数2位删除的长度----------------
arr.splice(index,1);
//--删除数据后,并保存数据----------------
localStorage.setItem("p20610",JSON.stringify( { "info":arr } ))
//--并保存数据 再次渲染到html页面----------------
show(arr);
}
//-------------修改功能----------------
var editIndex;//--定义修改时下标为editIdex-
//-------思路:将数据显示到输入区进行修改,就是点击修改显示当前数据为默认值
function edit(index){
//--确定修改按钮样式设置为block显示出来,添加按钮设置为none隐藏----------------
editOkDom.style.display="block";
addDom.style.display="none";
// i 是修改时 下标
//console.log( arr[i] );
//-----修改数组下标对应的值给对象obj,然后设置--姓名--的默认值---------
var obj= arr[index];
userDom.value=obj.user;
//--------设置--性别--的默认值---------
for(var i=0;i<sexDom.length;i++){//-------i为性别循环时的下标
// console.log(sexDom[i].value ,obj.sex)
if( sexDom[i].value == obj.sex ){
// console.log("sssss")
sexDom[i].checked=true;
}
}
//--------设置--地址--的默认值---------
addressDom.value=obj.address;
//--------设置--爱好--的默认值---------
for(var x=0;x<hobbyDom.length;x++){
for(var y=0;y<obj.hobby.length;y++){
if( hobbyDom[x].value == obj.hobby[y] ){
hobbyDom[x].checked=true;
break;
}
}
}
//--------设置--个人说明--的默认值---------
msgDom.value= obj.msg;
//-----------------
editIndex =index;
}
// -------------确认修改(和--添加--部分的代码相同和--添加--部分的代码相同-)---------
//----点击确认修改按钮绑定事件-------
editOkDom.onclick=function(){
//-----给确认修改按钮添加样式display为none进行隐藏;
editOkDom.style.display="none";
//-----给添加按钮添加样式display为block进行显示;
addDom.style.display="block";
//--------设置--姓名--的默认值---------
var user=userDom.value;
//--------设置--性别--的默认值---------
var sex ;
for(var i =0;i<sexDom.length;i++){
if(sexDom[i].checked == true){
sex= sexDom[i].value;
}
}
//--------设置--地址--的默认值---------
var address= addressDom.value;
//--------设置--爱好--的默认值---------
var hobby=[];
for(var j=0;j<hobbyDom.length;j++){
if(hobbyDom[j].checked == true){
hobby.push( hobbyDom[j].value )
}
}
//--------设置--个人说明--的默认值---------
var msg=msgDom.value;
//--------设置非空判断---------
if(user && sex && hobby.length>0 && address && msg){
var obj={
"id":new Date().getTime(),
"user":user,
"sex":sex,
"hobby":hobby,
"address":address,
"msg":msg,
}
//对修改好的数据复制给数组arr
arr[editIndex] = obj;
// editIdex为修改时的下标,看下面打印结果
//console.log(editIndex)
//------------修改完成后进行保存数据--------------
localStorage.setItem("p20610",JSON.stringify( { "info":arr } ))
//------------保存数据后渲染到页面--------------
show(arr);
//--------清空表单---------
userDom.value="";//姓名清空
msgDom.value="";//个人说明清空
}else{
alert("不能为空");
}
}
479
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
