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

      <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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是使用Layui表格进行添加、编辑、删除和保存数据的代码示例: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui表格行添加编辑删除操作和保存数据</title> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css"> </head> <body> <div class="layui-container"> <div class="layui-row"> <div class="layui-col-md12"> <table class="layui-table" lay-filter="test"> <thead> <tr> <th>ID</th> <th>名称</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>HTML</td> <td> <a href="javascript:void(0);" class="layui-btn layui-btn-xs" onclick="editRow(this)">编辑</a> <a href="javascript:void(0);" class="layui-btn layui-btn-danger layui-btn-xs" onclick="delRow(this)">删除</a> </td> </tr> <tr> <td>2</td> <td>CSS</td> <td> <a href="javascript:void(0);" class="layui-btn layui-btn-xs" onclick="editRow(this)">编辑</a> <a href="javascript:void(0);" class="layui-btn layui-btn-danger layui-btn-xs" onclick="delRow(this)">删除</a> </td> </tr> </tbody> </table> <div class="layui-btn-group"> <button class="layui-btn layui-btn-sm" onclick="addRow()">添加行</button> <button class="layui-btn layui-btn-sm" onclick="saveData()">保存数据</button> </div> </div> </div> </div> <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script> <script> layui.use(['table', 'layer'], function() { var table = layui.table; var layer = layui.layer; //监听单元格编辑 table.on('edit(test)', function(obj) { console.log(obj.value); //得到修改后的值 console.log(obj.field); //当前编辑的字段名 console.log(obj.data); //所在行的所有相关数据 }); }); //添加行 function addRow() { var table = layui.table; table.render({ elem: '#test', data: [{ id: '', name: '' }], cols: [ [{ field: 'id', title: 'ID', edit: 'text' }, { field: 'name', title: '名称', edit: 'text' }, { fixed: 'right', title: '操作', toolbar: '#barDemo' }] ] }); } //编辑行 function editRow(obj) { var table = layui.table; var tr = $(obj).parents('tr'); //将单元格设为可编辑状态 tr.find('td').each(function() { var td = $(this); if (td.attr('data-editable')) { td.attr('contenteditable', true); } }); } //删除行 function delRow(obj) { var tr = $(obj).parents('tr'); tr.remove(); } //保存数据 function saveData() { var table = layui.table; var data = table.cache.test; console.log(JSON.stringify(data)); layer.msg('数据已保存'); } </script> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script> </body> </html> ``` 注意事项: - 使用`layui.use()`方法加载`table`和`layer`模块。 - `table.render()`方法用于初始化表格,`elem`参数指定表格容器的选择器,`data`参数指定表格数据,`cols`参数指定表格列定义。 - 在表格列定义中,使用`edit`属性将单元格设为可编辑状态,使用`toolbar`属性指定操作列的工具栏模板。 - 在操作列的工具栏模板中,使用`lay-event`属性指定操作类型。 - 在JavaScript代码中,使用`table.on()`方法监听单元格编辑事件,使用`table.cache()`方法获取表格缓存数据

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值