文档章节

javascript 使用div层进行数据的添加修改删除

xiaoxin
 xiaoxin
发布于 2014/06/04 13:34
字数 841
阅读 156
收藏 3
点赞 0
评论 0

      <script language="javascript">
      //当前修改索引
      var updateIndex = -1;
      //添加or修改,删除直接调用方法不需要此变量
      var updateStatus = -1;
      //用于修改
      var rowid = -1;
      //添加数据
      function addData()
      {
          //添加操作
          updateStatus = 1;
          document.getElementById("dataxx").style.display = "";
      }
      //更新数据
      function updateData(index,trid)
      {
          if(index >=0 && document.all["data_Models[" + index + "].var_stzqymc"])
             {
              document.getElementById("var_stzqymc").value = document.all["data_Models[" + index + "].var_stzqymc"].value;
              document.getElementById("var_zch").value = document.all["data_Models[" + index + "].var_zch"].value;
              //修改索引,用于保存
              updateIndex = index;
              //修改状态,用于保存数据
              updateStatus = 2;
              rowid = trid;
              document.getElementById("dataxx").style.display = "";
             }
          else
             {
                 alert("修改出错!!!");
               updateIndex = -1;
                document.getElementById("dataxx").style.display = "none";
             }
          
          
          
      }
      //删除数据
      function deleteData(index,trid)
      {
          if(index >=0 && document.all["data_Models[" + index + "].var_stzqymc"])
          {
              //需要增加删除行的代码
              var table = document.getElementById("dwtztable");
              for(var i = 0 ; i <table.rows.length; i ++)
                 {
                  var row=table.rows[i];
                  if(row.id == trid)
                     {
                      table.deleteRow(i);
                      break;
                     }
                 }
              
              var dataxxstatus = document.all["data_Models[" + index + "].dataxxstatus"].value;
              if( dataxxstatus == "00" || dataxxstatus == "01")
              {
                document.all["data_Models[" + index + "].dataxxstatus"].value = "02";
              }
                else if( dataxxstatus == "10" || dataxxstatus == "11")
              {
                document.all["data_Models[" + index + "].dataxxstatus"].value = "12";
              }
              
          }
      }
      //保存数据
      function saveData()
      {
          if(!check1())return;
          if(updateStatus == 1)
          {
              
              //写保存数据代码
              var table = document.getElementById("dwtztable");
              var row=table.insertRow(table.rows.length);
              row.id = "trIndex" + (parseInt(document.all["table.rows.index"].value) + 1 ) ;
              var cell1=row.insertCell(0);
              var cell2=row.insertCell(1);
              var cell3=row.insertCell(2);
              cell1.align= "center";
              cell2.align= "center";
              cell3.align= "center";
              cell1.innerHTML=document.getElementById("var_stzqymc").value;
              cell2.innerHTML=document.getElementById("var_zch").value;
              cell3.innerHTML="<img src=\"<%= request.getContextPath() %>/images/2/edit.png\" title=\"修改\" style=\"cursor:pointer;\" onclick=\"updateData(" + (parseInt( document.all["table.rows.index"].value) + 1) +",'trIndex" + (parseInt( document.all["table.rows.index"].value) +1) +"');\" />"
              + " <img src=\"<%= request.getContextPath() %>/images/2/del.png\" title=\"删除\" style=\"cursor:pointer;\" onclick=\"deleteData(" + (parseInt(document.all["table.rows.index"].value) + 1) +",'trIndex" + (parseInt( document.all["table.rows.index"].value) +1) +"');\" /> ";
              var hiddenDataAdd = ""
              + "<input type=\"hidden\" name=\"data_Models[" + (parseInt(document.all["table.rows.index"].value) + 1 ) + "].var_stzqymc\" value=\"" + document.getElementById("var_stzqymc").value + "\" />"
              + "<input type=\"hidden\" name=\"data_Models[" + (parseInt(document.all["table.rows.index"].value) + 1 ) + "].var_zch\" value=\"" + document.getElementById("var_zch").value + "\" />"
              + "<input type=\"hidden\" name=\"data_Models[" + (parseInt(document.all["table.rows.index"].value) + 1 ) + "].chr_id\" value=\"\" />"
              + "<input type=\"hidden\" name=\"data_Models[" + (parseInt(document.all["table.rows.index"].value) + 1 ) + "].chr_old_id\" value=\"\" />"
              + "<input type=\"hidden\" name=\"data_Models[" + (parseInt(document.all["table.rows.index"].value) + 1 ) + "].chr_sbid\" value=\"\" />"
              + "<input type=\"hidden\" name=\"data_Models[" + (parseInt(document.all["table.rows.index"].value) + 1 ) + "].reg_bus_ent_id\" value=\"\" />"
              + "<input type=\"hidden\" name=\"data_Models[" + (parseInt(document.all["table.rows.index"].value) + 1 ) + "].dataxxstatus\" value=\"10\" />"
              ;
              document.getElementById("hiddenData").innerHTML = document.getElementById("hiddenData").innerHTML + hiddenDataAdd;
              //索个+1,用于下次用
              document.all["table.rows.index"].value =  (parseInt(document.all["table.rows.index"].value) + 1 );
              
              if(window.confirm("数据添加成功,是否继续添加?"))
                 {
                  inputReset();
                  addData();
                 }
              else{
                  updateStatus = -1;
                  document.getElementById("dataxx").style.display = "none";
                  inputReset();
              }
              
              
          }
          else if(updateStatus == 2)
             {
              document.all["data_Models[" + updateIndex + "].var_stzqymc"].value = document.getElementById("var_stzqymc").value  ;
              document.all["data_Models[" + updateIndex + "].var_zch"].value = document.getElementById("var_zch").value  ;
              var dataxxstatus = document.all["data_Models[" + updateIndex + "].dataxxstatus"].value;
              if( dataxxstatus== "00")
                 {
                  document.all["data_Models[" + updateIndex + "].dataxxstatus"].value = "01";
                 }
              else if( dataxxstatus== "10")
                 {
                  document.all["data_Models[" + updateIndex + "].dataxxstatus"].value = "11";
                 }
            //需要修改行的代码
              var table = document.getElementById("dwtztable");
              for(var i = 0 ; i <table.rows.length; i ++)
                 {
                  var row=table.rows[i];
                  if(row.id == rowid)
                     {
                      //修改每列数据
                      row.cells[0].innerHTML = document.getElementById("var_stzqymc").value;
                      row.cells[1].innerHTML = document.getElementById("var_zch").value;
                      break;
                     }
                 }
              //修改完成,恢复未用状态
              updateIndex = -1;
              rowid = -1;
              updateStatus = -1;
              document.getElementById("dataxx").style.display = "none";
              inputReset();
             }
        
      }
      function closeDiv()
      {
          updateStatus = -1;
          document.getElementById("dataxx").style.display = "none";
          inputReset();
      }
      function goback()
      {
          document.forms[0].action = "<%=request.getContextPath() %>/action/tjAction!back.dhtml";
          document.forms[0].submit();
      }
      
      function inputReset()
      {
          document.getElementById("var_stzqymc").value = "";
          document.getElementById("var_zch").value = "";
      }
      </script>


<div id="dataxx" style="display:none;height:200px;top:35%;left:30%;" class="kuang" >
 <div class="kuang_01"></div>
<div align="center" class="kuang_02">
  <table width="450" border="0" cellspacing="0" cellpadding="0" >
    <tr >
          <td colspan="2" style="text-align:center;height:50px;font-size: 20px">
          数据信息
          </td>
      </tr>
      
  </table>  
  <table width="450" border="1" cellspacing="0" cellpadding="0">
    <tr>
         <td width="200">名称</td>
         <td width="250"><s:textfield name="var_stzqymc" cssStyle="width:250px;"/></td>
    </tr>
    <tr>
         <td >号码</td>
         <td ><s:textfield name="var_zch" cssStyle="width:250px;"/></td>
    </tr>
      </table>
    <table width="400" border="0" cellspacing="0" cellpadding="0" >
    <tr >
          <td style="text-align:center;height:50px;">
          <img src="${pageContext.request.contextPath}/images/2/qd.png" style="cursor:pointer"  onclick="saveData();" width="98" height="36" />
          <img src="${pageContext.request.contextPath}/images/2/gb.png" style="cursor:pointer" onclick="closeDiv();" width="98" height="36" />
          </td>
      </tr>
  </table>  
   </div>
  <div class="kuang_03"></div>
  </div>


<style>

.kuang{ position:absolute;z-index:10;top:35%;left:30%;width:520px;height:auto; !important; -height:200px;overflow:visible;min-height:200px;}
.uang_01{ width:520px; height:30px; background-image:url(../../images/2/kuang_01.png); background-repeat:no-repeat; }
.kuang_02{ width:520px; height:auto; !important; background-image:url(../../images/2/kuang_02.png); background-repeat:repeat-y; -height:166px;min-height:166px;}
.kuang_03{ width:520px; height:30px; background-image:url(../../images/2/kuang_03.png); background-repeat:no-repeat;}

</style>

© 著作权归作者所有

共有 人打赏支持
xiaoxin
粉丝 17
博文 238
码字总数 18659
作品 0
海淀
项目经理
JavaScript MVC框架backbone.js初探

什么是backbone backbone不是脊椎骨,而是帮助开发重量级的javascript应用的框架。 主要提供了3个东西:1、models(模型) 2、collections(集合) 3、views(视图) backbone.js文件本身很小,压缩...

微一
2013/01/07
0
0
MVC与Backbone.js的demo简析

MVC简介 MVC是一种软件设计模式,它将应用程序分为Model、View、Controller三个部件,可以有效地将业务逻辑和数据显示分离。 Model包括算法实现、数据管理和数据库设计等。Model与数据格式无...

wsd1
2013/10/07
0
0
qury-easyui DataGrid 整合struts2增删查该入门实例(三)

主界面 添加 修改 删除 查询暂时按照单字段id查询 页面主要代码easyDemo1.jsp: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getConte......

一念三千
2012/11/01
0
0
JSON,异步加载(学习笔记)

JSON是一种传输数据的格式(以对象为样板,本质上就是对象,但用途有区别,对象就是本地用的,json是用来数据传输的,前端与后端的数据通信) JSON是静态类(不需要构造),类似于Math,内部...

Mrs_CoCo
04/23
0
0
PHP常用代码大全(新手入门必备)

1、连接MYSQL数据库代码 <?php $connec=mysqlconnect("localhost","root","root") or die("不能连接数据库服务器: ".mysqlerror()); mysqlselectdb("liuyanben",$connec) or die ("不能选择......

过儿1943
2012/12/24
0
0
【php增删改查实例】第二十七节 - 个人密码修改

当用户点击修改密码的时候,就弹出一个窗口。这里的弹窗,我们使用bootstrap提供的javascript插件。(modal) 我们就使用这个模态窗口。 模态窗口的代码: 在这个模态窗口中,找到class为 mo...

剽悍一小兔
06/08
0
0
面试基础(2018-03-16)

1、 Doctype作用?标准模式与兼容模式各有什么区别? 1、声明位于位于HTML文档中的第一行,处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文...

a小磊_
03/16
0
0
VC模式下javascript项目重构

项目现状 项目为单页web应用,只针对chrome浏览器,无开发文档。由于是追求进度的项目,开发约定极少,除了jquery、LAB.js、bootstrap以及一些UI组件外,没有使用其他开源组件。 项目简单封装...

lost_o0
2014/05/07
0
2
[Jquery] 实现鼠标移到某个对象,在旁边显示层。

当鼠标移到某个地方的时候,在旁边飘出一个DIV,离开则消失。 是使用了某位大大封装的一个函数,稍微改了下。 原文地址: 当鼠标移动上去显示一个层,在这个对象的旁边,并且可以给这个层添加...

51shuaige
2013/12/10
0
0
通过Div将页面分三块(上,中,下),然后通过Ext来改变Content的内容(一)

修改成Div的原因: 1、原始系统主架构(V层)是通过frameset来划分的; 2、系统中需要提供全屏的功能,在frameset中不好实现; 现修改成Div如下: <div id="header" ></div><div id="content...

xiaoyang0878
2011/12/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

mui集成微信H5支付(返回白屏问题已经解决)

一.项目需求 因为公司人员缺少,没有专门开发安卓和ios的人员,为了项目尽早上线采用了混合APP开发的方式,我选择了MUI混合开发框架,项目中需要在用户购买VIP会员的时候进行支付,所以需要在项目...

银装素裹
6分钟前
0
0
Confluence 6 启用远程 API

XML-RPC 和 SOAP 远程 API 从 Confluence 5.5 开始已经废弃了。我们推荐你使用完全支持的 Confluence Server REST API。 希望启用 XML-RPC 和 SOAP 远程 API,你需要从管理员控制台(Adminis...

honeymose
9分钟前
0
0
非常实用的Chrome插件之总结

Chrome在全世界能够如此受欢迎,除了它的稳定性强,速度快这些优点外,还有就是它的插件是非常丰富强大的!最重要的是作为一个程序员,如果不使用Chrome的话你还谈什么是程序员! 有人说不装...

Gibbons
19分钟前
0
0
TensorFlow gpu 版 安装

win10 + Python3.6 下载cuda https://developer.nvidia.com/cuda-downloads?target_os=Windows&target_arch=x86_64&target_version=81&target_type=exelocal 下载cudnn,复制链接地址,使用迅......

阿豪boy
25分钟前
0
0
SpringBoot集成Redis--配置自定义的RedisCacheManager

配置自定义的RedisCacheManager--1自定义键生成规则 默认的键生成器 当不指定缓存的key时,SpringBoot会使用SimpleKeyGenerator生成key。 SimpleKeyGenerator SimpleKey 查看源码可以发现,它...

karma123
25分钟前
0
0
防火墙未来的发展趋势在哪里?

导读 防火墙(Firewall),也称防护墙,是由Check Point创立者Gil Shwed于1993年发明并引入国际互联网。当下互联网时代,无论是大小企业,大部分都会部署有防火墙的设备,但这些防火墙往往并不...

问题终结者
27分钟前
0
0
MongoDB 副本集 成员节点 RECOVERING 状态处理

这两天遇到好几个MongoDB集群故障,其中一种就是节点长期处于 RECOVERING 状态,并且不能主动追上 primary 节点,需要手动干预。 首先 rs.status()查看实例状态,发现有的节点处于 RECOVERI...

xxj123gogo
33分钟前
0
0
建造者/构造者模式

在建造者模式中, 有如下4个角色: ● Product产品类 通常是实现了模板方法模式, 也就是有模板方法和基本方法, 这个参考第10章的模板方 法模式。 例子中的BenzModel和BMWModel就属于产品类...

kim_o
35分钟前
0
0
C常用头文件总结

C常用头文件 #include <assert.h>    //设定插入点#include <ctype.h>     //字符处理#include <errno.h>     //定义错误码#include <float.h>     //浮点数处理#in......

zxszxs
44分钟前
0
0
JVM学习笔记一:类加载机制介绍

1、类加载器 先来查看一波代码 package com.black.example.helloworld;public class JvmTest { public static void main(String[] args) { ClassLoader classLoader = J......

刘祖鹏
44分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部