JS源生代码“增删改查”之增
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 = "张三";
基本增加就是这样啦,等下次来说删除功能
JS源生代码“增删改查”之增的更多相关文章
- SQL Server学习之路(三):“增删改查”之“增”
0.目录 1.前言 2.通过SSMS添加数据 3.通过SQL语句添加数据 3.1 添加单条数据 3.2 添加多条数据 4.通过其他表导入数据 4.1 通过数据库中的其他表导入数据 4.2 通过exce ...
- day38 mycql 初识概念,库(增删改查),表(增删改)以及表字段(增删改查),插入更新操作
在Navicat中把已经生成的表逆向成模型 数据库上,右键-逆向数据库到模型 ego笔记: 增删改查 文件夹(库) 增 create database day43 charset utf8; 改 al ...
- VS连接SQL Server数据库,增删改查详细教程(C#代码)_转载
工具: 1.Visual Studio (我使用的是vs2013) 2.SQL Server (我使用的是sql server2008) 操作: 1.打开SQL Server,打开后会看到数据库的初 ...
- IOS之分析网易新闻存储数据(CoreData的使用,增删改查)
用过网易新闻客户端的朋友们都知道,获取新闻列表时有的时候他会请求网络有时候不会,查看某条新闻的时候再返回会标注已经查看的效果,接下来分析一下是如何实现的. 首先: 1.网易新闻用CoreData存储了 ...
- python 全栈开发,Day124(MongoDB初识,增删改查操作,数据类型,$关键字以及$修改器,"$"的奇妙用法,Array Object 的特殊操作,选取跳过排序,客户端操作)
一.MongoDB初识 什么是MongoDB MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案. MongoDB 是一个介 ...
- abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之一(二十七)
abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...
- mogoose 创建数据库并增删改查
下载 npm i mongoose -s 连接数据库 const mongoose = require("mongoose"); mongoose.connect(dbURL); ...
- 用Java中的File类模拟实现对系统文件的增删改查效果
码字不易,三连支持一波吧 IO操作向来是各大语言的热区,而对文件的操作也是重中之重. 那么在Java中也给我们提供了很多关于文件操作的类.今天我就用一个比较基本的File类来模拟实现对文件的增删改查效 ...
- Mysql学习笔记(六)增删改查
PS:数据库最基本的操作就是增删改查了... 学习内容: 数据库的增删改查 1.增...其实就是向数据库中插入数据.. 插入语句 insert into table_name values(" ...
随机推荐
- ORACLE - 管理表空间和数据文件
ORACLE表空间是一个逻辑分区,一个数据文件只能属于一个表空间,一个表空间可以拥有多个数据文件. 一般情况下,如果一个实例分配给多个应用使用,需要创建不同的表空间,每个用户使用自己的表空间. 一.表 ...
- NlpirParser智能挖掘平台词性标注新算法
词性标注是自然语言浅层理解的一个重要环节,它可帮助系统自动判定词语所属的语法范畴,为进一步处理提供更高层面的支持.词性标注主要任务是消除词性兼类歧义,对于新信息检测来说,它的实际意义还在于: (1)能 ...
- An internal error occurred during: "Launching web on MyEclipse Tomcat"
An internal error occurred during: "Launching web on MyEclipse Tomcat" 解决办法1 1.首先关闭MyEclip ...
- gitlab和github一起使用
还是在转我笔记上的内容, 也算备份 参考(https://segmentfault.com/a/1190000002994742) 可以对比着看, 我记得参考里面有个点没有说详细, 我把自己的流程记下 ...
- 利用python发送邮件
找了很多使用python发送邮件的文章, 发现写的并不是太全, 导致坑特别多, 刚把这个坑跨过去, 在此记录下来 本代码使用163作为发送客户端, 接收邮箱随意 首先登录163邮箱, 开启POP3/S ...
- 移动玩具[HAOI2008]
题目描述 在一个4*4的方框内摆放了若干个相同的玩具,某人想将这些玩具重新摆放成为他心中理想的状态,规定移动时只能将玩具向上下左右四个方向移动,并且移动的位置不能有玩具,请你用最少的移动次数将初始的玩 ...
- Selenium+java操作浏览器cookies
描述:登录CSDN,将登录信息cookies保存到文件,再次打开网页时,直接利用文件中的数据登录. 1. 获取cookies并保存到文件 步骤: ① 打开CSDN的登录界面: ② 填写用户名和密码: ...
- NYOJ-63 小猴子下落(二叉树及优化算法详解)
小猴子下落 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 有一颗二叉树,最大深度为D,且所有叶子的深度都相同.所有结点从左到右从上到下的编号为1,2,3,··· ...
- 28.Implement strStr()【leetcod】
Implement strStr(). Returns the index of the first occurrence of needle in haystack, or -1 if needle ...
- centos7安装mysql(yum)
centos7安装mysql(yum) ----安装环境----依赖安装----检查mysql是否已安装----安装----验证是否添加成功----选择要启用的mysql版本----通过Yum安装my ...