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

为什么80%的码农都做不了架构师？>>>   

      <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;\" οnclick=\"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;\" οnclick=\"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"  οnclick="saveData();" width="98" height="36" />
          <img src="${pageContext.request.contextPath}/images/2/gb.png" style="cursor:pointer" οnclick="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>

转载于:https://my.oschina.net/farces/blog/272308