51呢最近在做一个管理数据的,第一次接触到用JS的源代码去实现一些功能,才知道网页里的许多功能都是依赖于“增删改查”完成的,下面的几张图片就是对于增的演示:
下面是有关HTML的代码:这个主要是弹窗部分的HTML代码
<div id="addDialog"> <div id="div11"> <form action="" id="from"> <table class="bg"> <tr> <td><span>客户编号</span></td> <td><input type="text" id="clientCount"/></td> </tr> <tr> <td><span>客户名称</span></td> <td><input type="text" id="client"/></td> </tr> <tr> <td><span>所在地</span></td> <td><input type="text" id="addressNow"/></td> </tr> <tr> <td><span>地址</span></td> <td><input type="text" id="address"/></td> </tr> <tr> <td><span>客户经理</span></td> <td><input type="text" id="manager"/></td> </tr> <tr> <td><span>邮政</span></td> <td><input type="text" id="posCcode"/></td> </tr> <tr> <td><span>电话</span></td> <td><input type="text" id="tel"/></td> </tr> <tr> <td><span>客户星级</span></td> <td> <select name="" class="select" id="star"> <option>---请选择---</option> <option value="★">★</option> <option value="★★">★★</option> <option value="★★★">★★★</option> <option value="★★★★">★★★★</option> <option value="★★★★★">★★★★★</option> </select> </td> </tr> <tr> <td colspan="2"><input class="set" type="reset"/></td> </tr> <tr> <td colspan="2"><input type="submit" class="set" onclick="addSite()" value="提交"/></td> </tr> <tr> <td colspan="2"><input type="submit" class="set" onclick="closeSite()" value="关闭"/></td> </tr> </table> </form> </div> </div>
这里就是图片中的加号所对应的HTML代码
<img src="img/add.png" class="img1" onclick="add()"/>
主要通过这个函数用JS来对弹窗进行隐藏和显示
这个是显示,隐藏在添加的函数里面
function add(){ document.getElementById("addDialog").style.display = "block"; }
下面这段是针对添加内容的JS代码
function addSite(){ var clientCount = document.getElementById("clientCount").value; var client = document.getElementById("client").value; var addressNow = document.getElementById("addressNow").value; var address = document.getElementById("address").value; var manager = document.getElementById("manager").value; var posCcode = document.getElementById("posCcode").value; var tel = document.getElementById("tel").value; var star = document.getElementById("star").value; var site = { clientCount:clientCount, client :client, addressNow :addressNow, address:address, manager :manager, posCcode:posCcode, tel:tel, star:star, } if(localStorage.sites == undefined){ var brr = []; }else{ var dtr = localStorage.sites; var brr = JSON.parse(dtr); } for(var i=0; i<brr.length; i++){ if(brr[i].client == client){ alert("该客户已添加,请添加其他客户");return; } } brr.push(site); var dtr = JSON.stringify(brr); localStorage.sites = dtr; showAllSite(); document.getElementById("from").reset(); document.getElementById("addDialog").style.display = "none"; }
通过document.getElementById().value取到所需要添加的值,存入一个数组中,然后判断一下是都已经有存入的了,如果有则需要重新添加,若没有则会添加成功,然后弹窗关闭后重新刷新数据。
总结为下面几条:
1、 取到录入的各种信息
2、 把这些信息封装成一个对象。
3、 从本地文件中,读取出存储数据的数组字符串。并将字符串,转回数组格式。
如果本地文件中,没有这个数组,就新建一个数组存放。
4、 数组中,push进一个新组建的对象。
5、 将新数组,重新转为字符串。把字符串丢回文件。
6、 重新读取一边文件,重新加载表格。
在这其中:
将JS中的对象、数组,传化为JSON字符串。
var str1 = JSON.stringify(users); console.log(str1);
将JSON字符串转化为JSON对象。
var obj = JSON.parse(str1); console.log(obj);
HTML5 新增Web存储方式,主要有两种:
localStorage 和 sessionStorage,两个对象在使用方式上没有任何区别,唯一的不同点是存储数据的有效时间
① localStorage : 除非手动删除,否则数据将一直保存在本地文件;
② sessionStorage : 当浏览器关闭时,sessionStorage就被清空。
[Storage的数据存储]
Storage可以像普通对象一样,使用.追加或者读取最新的数据。
eg :localStorage.username = "张三";
基本增加就是这样啦,等下次来说删除功能