javaScript基础学习--数组+DOM之增删改查-综合案例
2021/6/12 20:22:20
本文主要是介绍javaScript基础学习--数组+DOM之增删改查-综合案例,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
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("不能为空"); } }
这篇关于javaScript基础学习--数组+DOM之增删改查-综合案例的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)
- 2024-05-30【Java】百万数据excel导出功能如何实现