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 = "张三";

  基本增加就是这样啦,等下次来说删除功能

时间: 2024-11-05 16:28:46

JS源生代码“增删改查”之增的相关文章

Oracle增删改查--之增

Oracle增删改查--之增 1.新建数据库用户并设置密码 create user 用户名 identified by 密码 2.为新建用户授权dba grant dba to 用户名; 3.登陆验证feiyu用户 conn feiyu: 4.创建表(首先切到当前用户下) create table 表名(id number(6)not null primary key,id_username char(4)); 5.给chengji表添加数据 insert into 表名 values('2',

Sql Server2008温故而知新系列02:数据增删改查之&quot;增&quot;

增删改查-数据库最基本使用方法,也是数据库最常用的操作方法: 用到的命令:insert[into] 插入:delete from  删除:update 修改:select 查询. 首先说一说插入的格式(即新增数据): 1.insert into table_name(field1,field2,field3,…………)  values(字段1记录,字段2记录,…………) 如有多行记录重复写入多行 2.insert into table_name(field1,field2,field3,…………

SSM练手-增删改查-5-新增_Modal框搭建

新增员工信息 实现图如下: 1 利用Bootstrap搭建大致页面 <!--新增员工Model框--> <div class="modal fade" id="Emp_Add_Modal" tabindex="-1" role="dialog" aria-labelledby="Emp_Add_Modal_label"> <div class="modal-dialo

MySQL增删改查之“增”

插入记录有两种个基本语法: 插入基本语法一 类别 详细解示 基本语法 insert into 表 values(值1,值2,值n); 示例 INSERT INTO user values(2,'php中文网','男') 示例说明 向user表中插入值id为2,姓名为李文凯,性别为男 插入基本语法二 类别 详细解示 基本语法 insert into 表(字段1,字段2,字段n) values(值1,值2,值n); 示例 INSERT INTO user(id,username,sex) value

SSM练手-增删改查-5-新增_保存员工信息

保存员工信息 1 后台保存到数据库: @RequestMapping(value = {"/emp/save"}, method = {RequestMethod.POST}) @ResponseBody public Msg addEmp(Employee employee){ employeeService.saveEmp(employee); return Msg.success(); } 2 前台发送AJAX请求: //保存员工信息 $("#emp_save_btn&

PHP MYSQL 增删改查之增 jsonAdd

<?php //header("Content-type: text/html; charset=UTF8"); //header("Content-Type: text/html;charset=utf-8"); $end=array(); $id = $_POST['id']; $name = $_POST['name']; $age = $_POST['age']; $sex = $_POST['sex']; $end['name']=$name; $m

MySQL增删改查--之增

MySQL增加数据 1.新建数据库用户 //新建feiyu数据库用户允许在所有IP地址登陆mysql> create user 'feiyu'@'%' identified by '123'; //新建guest数据库用户允许在192.168.1网段所有地址登陆mysql> create user 'guest'@'192.168.1.%' identified by '123'; 注:新建完数据库新用户如果出现以下登陆错误为默认密码错误 解决办法有两种:(如下)(1) 此方法只可解决普通用户

abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之六(三十二)

abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+easyui+efcore实现仓储管理系统——解决方案介绍(二) abp(net core)+easyui+efcore实现仓储管理系统——领域层创建实体(三) abp(net core)+easyui+efcore实现仓储管理系统——定义仓储并实现 (四) abp(net core)+easyui

完整增删改查,数据库字符串攻击

复习一下,基础的增删改查, 增一条信息,删一条信息.改一条信息 询问语句 Console.WriteLine("请输入你的学号"); string xuehao = Console.ReadLine(); Console.WriteLine("请输入你的姓名"); string name = Console.ReadLine(); Console.WriteLine("请输入你的班级"); string banji= Console.ReadLi