文档章节

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

xiaoxin
 xiaoxin
发布于 2014/06/04 13:34
字数 841
阅读 157
收藏 3

      <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
博文 248
码字总数 18713
作品 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增删改查实例】第二十七节 - 个人密码修改

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

剽悍一小兔
06/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

中国发布域名系统基础软件 “红枫”

9月12日消息,域名工程中心(英文缩写 ZDNS)发布了宣称自主开发的域名系统基础软件 “红枫(Maple DNS)”。 9月12日消息,域名工程中心(英文缩写 ZDNS)发布了宣称自主开发的域名系统基础软...

问题终结者
18分钟前
1
0
Shell编程(分发系统介绍、expect远程登录、expect远程执行命令、expect传递参数)

分发系统介绍expect 分发系统expect即分发脚本,是一种脚本语言;通过他可以实现传输,输入命令(上线代码) 应用场景:业务越来越大,网站app,后端,编程语言是php,所以就需要配置lamp或者...

蛋黄_Yolks
22分钟前
1
0
Java Http请求工具类

public static String httpPost(String source, String params) {URL url = null;HttpURLConnection conn = null;OutputStream os = null;String ret = null;try {......

yuewawa
29分钟前
1
0
C++11 智能指针

C++11提供了三个智能指针,std::shared_ptr,std::unique_ptr,std::weak_ptr。最常用的是shared_ptr和unique_ptr。 (1)std::shared_ptr shared_ptr是共享指针,通过在控制块中增加引用计数...

yepanl
30分钟前
1
0
React 服务器渲染原理解析与实践

网盘下载地址 React 服务器渲染原理解析与实践 本套课程,讲解了React中SSR技术的整个搭建思路及流程,完整的从原理上讲清楚了SSR的概念,重点在于讲解编写SSR框架遇到的各种知识点,以及细节...

qq__2304636824
42分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部