文档章节

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

xiaoxin
 xiaoxin
发布于 2014/06/04 13:34
字数 841
阅读 161
收藏 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
粉丝 18
博文 261
码字总数 20225
作品 0
海淀
私信 提问
JavaScript MVC框架backbone.js初探

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

微一
2013/01/07
0
0
jquery jsp 获取被选中的数据中的日期值

$(function(){ $('#xmhk').datagrid({ url:'../json/getCashList.jsp', iconCls:'icon-save', nowrap: false, striped: true, collapsible:true, remoteSort: false, fitColumns: true, sort......

wenwen1
2012/08/27
2.1K
1
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
jquery jsp 删除和修改。

我写的getCashList1.js如下: $(function(){ $('#xmhk').datagrid({ url:'../json/getCashList.jsp', iconCls:'icon-save', nowrap: false, striped: true, collapsible:true, remoteSort: ......

wenwen1
2012/08/25
787
2

没有更多内容

加载失败,请刷新页面

加载更多

js垃圾回收机制和引起内存泄漏的操作

JS的垃圾回收机制了解吗? Js具有自动垃圾回收机制。垃圾收集器会按照固定的时间间隔周期性的执行。 JS中最常见的垃圾回收方式是标记清除。 工作原理:是当变量进入环境时,将这个变量标记为“...

Jack088
19分钟前
1
0
大数据教程(10.1)倒排索引建立

前面博主介绍了sql中join功能的大数据实现,本节将继续为小伙伴们分享倒排索引的建立。 一、需求 在很多项目中,我们需要对我们的文档建立索引(如:论坛帖子);我们需要记录某个词在各个文...

em_aaron
35分钟前
2
0
"errcode": 41001, "errmsg": "access_token missing hint: [w.ILza05728877!]"

Postman获取微信小程序码的时候报错, errcode: 41001, errmsg: access_token missing hint 查看小程序开发api指南,原来access_token是直接当作parameter的(写在url之后),scene参数一定要...

两广总督bogang
35分钟前
6
0
MYSQL索引

索引的作用 索引类似书籍目录,查找数据,先查找目录,定位页码 性能影响 索引能大大减少查询数据时需要扫描的数据量,提高查询速度, 避免排序和使用临时表 将随机I/O变顺序I/O 降低写速度,占用磁...

关元
54分钟前
7
0
撬动世界的支点——《引爆点》读书笔记2900字优秀范文

撬动世界的支点——《引爆点》读书笔记2900字优秀范文: 作者:挽弓如月。因为加入火种协会的读书活动,最近我连续阅读了两本论述流行的大作,格拉德威尔的《引爆点》和乔纳伯杰的《疯传》。...

原创小博客
今天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部