一个可动态编辑多条数据的JS

最新推荐文章于 2022-11-24 10:28:03 发布
最新推荐文章于 2022-11-24 10:28:03 发布
阅读量1.4k 收藏
点赞数
分类专栏： 其他技术总结 文章标签： class datagrid button table input border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/andychen888/article/details/560124
版权

<!--
    /**
    * 增加一行数据
    */
    function dataGridAdd(templet, dataGrid, rowCountHolder, rowName, colArray)
    {
        var ListSumEx = rowCountHolder.value;
        ListSumEx++;
        var temp = dataGrid;
        temp.insertRow(temp.rows.length);
        temp.rows[temp.rows.length -1].insertCell(0);
        var sHTML;
        sHTML=templet.innerHTML;
        sHTML=Replace(sHTML,rowName + "0",rowName+ListSumEx);//行数据表名称ListTbEx
        if(ListSumEx%2 == 0){//交替颜色设置
          sHTML=Replace(sHTML,"list-tr1","list-tr2");
        }
        else{
          sHTML=Replace(sHTML,"list-tr2","list-tr1");
        }
        //替换没一列
        for(var c = 0; c < colArray.length; c++) {
            sHTML=Replace(sHTML,colArray[c] + "0",colArray[c]+ListSumEx);
        }
        temp.rows[temp.rows.length-1].cells[0].innerHTML=sHTML;
        rowCountHolder.value = ListSumEx;
    }
    /**
     * 删除一行数据
     */
    function dataGridDelete(deltRow, dataGrid, rowCountHolder, rowName, colArray)
    {
        var sHTML;
        var temp = dataGrid;
        if (rowCountHolder.value<1)
        {
            return;
        }
        var fix = 0;
        for (var j=0;j<temp.rows.length;j++)
        {
            var chdID = getChlidID(temp.rows[j]);
            if(chdID == null || chdID =="") {
                fix++;//不是要检查的
            } else if (chdID==deltRow){
                for (var a=j+1;a<temp.rows.length;a++){
                    sHTML=temp.rows[a].cells[0].innerHTML;
                    sHTML=Replace(sHTML,rowName+(a - fix),rowName+(a - (1 + fix)));
                    if(sHTML.indexOf("list-tr1")!=-1){
                        sHTML=Replace(sHTML,"list-tr1","list-tr2");
                    } else{
                        sHTML=Replace(sHTML,"list-tr2","list-tr1");
                    }
                    //替换每一列
                    for(var c = 0; c < colArray.length; c++) {
                       sHTML=Replace(sHTML,colArray[c]+(a - fix),colArray[c]+(a - (1 + fix)));
                    }
                    temp.rows[a].cells[0].innerHTML=sHTML;
                }
                temp.deleteRow(j);
            }
        }
        rowCountHolder.value = rowCountHolder.value-1;
    }
    /**
     * 字符串替换
     * Sstring innerHTML对象
     * Cstring 被替换的字符串
     * Dstring 目的字符串
     */
    function Replace(Sstring,Cstring,Dstring)
    {
        var blength=Cstring.length;
        var firstbyte=Sstring.indexOf(Cstring,0);
        for (var i=0;i<=Sstring.length-blength;i++)
        {
            tstring=Sstring.substring(i,i+blength);
            if (tstring==Cstring)
            {
                Sstring=Sstring.substring(0,i)+Dstring+Sstring.substring(i+blength,Sstring.length);
            }
        }
        return Sstring;
    }
    /**
     * 获取子节点的id
     */
    function getChlidID(par) {
 var chd = par.cells[0].childNodes;
 for(var i=0; i<chd.length; i++){
       if(chd[i].tagName=='TABLE'){
                return chd[i].id;
            }
        }
    }
-->

 

VLanConfig.jsp

<%@page contentType="text/html; charset=UTF-8"%>
<%@page import="java.util.*,com.cnunisoft.uma.tableobject.v_cfgchghist,com.cnunisoft.uma.action.ParameterTools,java.text.*"%>
<%@taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%@taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"%>
<html>
<head>
<link href="../Resource/style/style1.css" _fcksavedurl=""../Resource/style/style1.css"" _fcksavedurl=""../Resource/style/style1.css"" rel="stylesheet" type="text/css">
<script type="text/javascript" language="javascript" src="../Resource/Js/DataGridEdit.js"></script>
<title>VLAN管理</title>
</head>
<body class="body">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="1">
  <tr>
    <%@include file="../includeLeft.jsp"%>
 <td valign="top" class="ob-bc">
 <table width="100%" border="0" cellpadding="2" cellspacing="1" class="form-table">
        <tr align="center" valign="top">
          <td class="tab-head">
     <table width="100%" height="100%" cellpadding="0" cellspacing="0">
              <tr class="text-title">
                <td class="text-title" width="60%" colspan="6" valign="top"><div align="left">VLAN配置</div></td>
              </tr>
            </table>
    </td>
        </tr>
      </table>
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr align="center" valign="top" class="list-tr1">
   <td width="35%" align="right">
      VLAN号</td>
   <td width="65%" align="left">
      <input type="text" name="ip"></td>
  </tr>
  <tr align="center" valign="top" class="list-tr2">
   <td width="35%" align="right">
      描述</td>
   <td width="65%" align="left">
   <textarea name="desc">
   </textarea>
   </td>
  </tr>

        <tr align="center">
          <td colspan="2">
    <table width="100%" height="100%" cellpadding="0" cellspacing="1" bgcolor="#FFFFFF">

     <!--交换机信息 开始-->
              <tr align="center" class="tab-title1">
                <td class="tab-head"><table width="100%" height="100%" cellpadding="0" cellspacing="0">
                    <tr class="text-title">
                      <td class="text-title" width="60%" colspan="6" valign="top"><div align="left">交换机</div></td>
                    </tr>
                  </table></td>
              </tr>
     <tr class="list-tr1">
      <td>
     <table width="100%" id="dataGrid1" height="100%" cellpadding="0" cellspacing="0">
      <tr>
        <td>
        <table align="center" class="tab-title" width="100%">
         <tr align="center">
        <td width="80%" class=tab-title>网络交换机</td>
        <td width="20%" class=tab-title>删除</td>
         </tr>
       </table>
        </td>
       </tr>
        <tr style="display:none">
         <td id="ListItem">
         <table align="center" id="ListTb0" class="dg-tr">
           <tr class="list-tr1">
          <td width="80%" align="center" style="border-right:1px solid;">
            <select name="switch0">
          <option value="1">192.168.1.254</option>
          <option value="2">UDP</option>
           </select>
          </td>
          <td width="20%" align="Center">
          <a href="#" _fcksavedurl=""#"" onClick="if(confirm('是否确定删除?')){dataGridDelete('ListTb0', document.all.dataGrid1, document.all.switchnum, 'ListTb', new Array('switch'));}else{return false;}"> <img src="../Resource/Images/deleteicon.gif" border="0" width="13" height="17" alt="删除"></a>
          </td>
           </tr>
         </table>
       </td>
        </tr>
     </table>
    </td>
     </tr>
              <tr align="center" class="tab-foot">
                <td colspan="5"><input name="addswitch" type="button" class="button" value="增加交换机" OnClick="dataGridAdd(ListItem, document.all.dataGrid1, document.all.switchnum, 'ListTb', new Array('switch'))">
                </td>
              </tr>
              <tr align="center" class="list-tr1">
                <td colspan="5">&nbsp;&nbsp;&nbsp;
                </td>
              </tr>    
     <!--交换机信息 结束-->

     <!--部门信息 开始-->
              <tr align="center" class="tab-title1">
                <td class="tab-head"><table width="100%" height="100%" cellpadding="0" cellspacing="0">
                    <tr class="text-title">
                      <td class="text-title" width="60%" colspan="6" valign="top"><div align="left">部门</div></td>
                    </tr>
                  </table></td>
              </tr>
    
     <tr class="list-tr1">
      <td>
     <table width="100%" id="dataGrid2" height="100%" cellpadding="0" cellspacing="0">
      <tr>
        <td>
        <table align="center" class="tab-title" width="100%">
         <tr align="center">
        <td width="80%" class=tab-title>部门</td>
        <td width="20%" class=tab-title>删除</td>
         </tr>
       </table>
        </td>
       </tr>
        <tr style="display:none">
         <td id="DepItem">
         <table align="center" id="DepTb0" class="dg-tr">
           <tr class="list-tr1">
          <td width="80%" align="center" style="border-right:1px solid;">
            <select name="dep0">
          <option value="1">部门一</option>
          <option value="2">部门二</option>
           </select>
          </td>
          <td width="20%" align="Center">
          <a href="#" onClick="if(confirm('是否确定删除?')){dataGridDelete('DepTb0', document.all.dataGrid2, document.all.depnum, 'DepTb', new Array('dep'));}else{return false;}"> <img src="../Resource/Images/deleteicon.gif" border="0" width="13" height="17" alt="删除"></a>
          </td>
           </tr>
         </table>
       </td>
        </tr>
     </table>
    </td>
     </tr>   
      
              <tr align="center" class="tab-foot">
                <td colspan="5">
     <input name="adddep" type="button" class="button" value="增加部门" onClick="dataGridAdd(DepItem, document.all.dataGrid2, document.all.depnum, 'DepTb', new Array('dep'))">
                </td>
              </tr>
              <tr align="center" class="list-tr1">
                <td colspan="5">&nbsp;&nbsp;&nbsp;
                </td>
              </tr>         
     <!--部门信息 结束-->

     <!--用户信息 开始-->
     <tr align="center" class="tab-title1">
                <td class="tab-head">
     <table width="100%" height="100%" cellpadding="0" cellspacing="0">
      <tr class="text-title">
        <td class="text-title" width="60%" colspan="6" valign="top"><div align="left">用户</div></td>
      </tr>
                   </table>
    </td>
              </tr>
     <tr class="list-tr1">
      <td>
     <table width="100%" id="dataGrid3" height="100%" cellpadding="0" cellspacing="0">
      <tr>
        <td>
        <table align="center" class="tab-title" width="100%">
         <tr align="center">
        <td width="80%" class=tab-title>用户</td>
        <td width="20%" class=tab-title>删除</td>
         </tr>
       </table>
        </td>
       </tr>
        <tr style="display:none">
         <td id="UserItem">
         <table align="center" id="UserTb0" class="dg-tr">
           <tr class="list-tr1">
          <td width="80%" align="center" style="border-right:1px solid;">
            <select name="user0">
          <option value="1">卖要良</option>
          <option value="2">张一隆</option>
           </select>
          </td>
          <td width="20%" align="Center">
          <a href="#" onClick="if(confirm('是否确定删除?')){dataGridDelete('UserTb0', document.all.dataGrid3, document.all.usernum, 'UserTb', new Array('user'));}else{return false;}"> <img src="../Resource/Images/deleteicon.gif" border="0" width="13" height="17" alt="删除"></a>
          </td>
           </tr>
         </table>
       </td>
        </tr>
     </table>
    </td>
     </tr>   
    
     <tr align="center" class="tab-foot">
                <td colspan="5">
     <input name="adduser" type="button" class="button" value="增加用户" onClick="dataGridAdd(UserItem, document.all.dataGrid3, document.all.usernum, 'UserTb', new Array('user'))">
                </td>
              </tr>
     <!--用户信息 结束-->

              <tr align="center" class="tab-foot">
                <td colspan="5">
        <input type="hidden" name="switchnum" value="0">
     <input type="hidden" name="depnum" value="0">
     <input type="hidden" name="usernum" value="0">
     <input name="save" type="button" class="button" value="保  存">
                   <input name="ret" type="button" class="button" value="返  回">
    </td>
              </tr>
            </table></td>
        </tr>
    </table></td>
  </tr>
  <tr>
    <td height="30" colspan="3" class="copy" valign="bottom"><%@include file="../copyRight.inc"%>
    </td>
  </tr>
</table>
</body>
</html>

天步真源
关注
专栏目录
js动态生成一个表格并获取mysql数据库数据_JS实现动态生成表格并提交表格数据向后端...
weixin_42132352的博客
02-02 710
本文实例介绍了JS实现动态生成表格并向后端提交表格数据的相关代码，分享给大家供大家参考，具体内容如下先来看一下需求：在web页面上动态的生成表格，并可以对表格中的数据进行编辑，然后把表格中的数据提交至后端服务器保存。那么我们首先需要解决的是动态生成表格的问题1.首先我们需要导入JS库文件。2.然后在页面div中事先创建一个空白表格，可以根据需求而定，我这里是一个带表头的表格表头1表头2表头3表头4...
帆软报表多行多条数据写入表_帆软报表（多sheet）自定义分页查询
weixin_40005330的博客
12-21 1186
三、添加自定义按钮以及JS事件1、打开‘模板Web属性’2、选中‘填报页面设置’，修改2)为‘为模板单独设置‘，3)中是前面七个是添加的自定义按钮；通过4)按钮进行设置；5)操作是添加‘加载结束’事件；接下来详细讲述每个步骤；3、点击4)之后弹出下面页面，自上而下七个按钮分别为首页、上一页、页码显示框、斜杠、总页数、下一页、末页通过‘编辑’按钮可以改图标，然后依次添加自定义事件自定义事件：首页：v...
javascript 实现输入多行动态输入
05-31
JSP用中收集数据:javascript 实现输入多行动态输入 在网上找了一下,只有一篇此类文章,还是PHP的,害得我要特意去看一下PHP,感觉很不好,是一种弱类型的语言,可以不声明就使用,因此,还要在每个变量前加$.不知道那些高手们为什么不谈谈自己写过报关系统等时候,一次性动态输入多行数据的经历. 一般,我们用 request.getParameter("value"); 来获得静态HTML输入的值.然后不要忘记判断是否为空,是否含有特殊字符等. 还可以用 Enumeration paramNames=request.getParameterNames(); while(paramNames.hasMoreElements()){String paramName=(String)paramNames.nextElement();} 来收集<input type="text" name="name"/>中的name 但是我们每增加新的一行,参数名同上一行一样,那么,我们将如何获得value的值? 这里我又去看书(servlet 和 JSP 核心编程,极好的一本书,该讲的都讲了,读明白了它servlet/JSP也就可以说精通了)p70页里面:getParameterValues()返回字符串数组,然后我们用循环判断这个字符串数组的长度,再就是获得值了
js添加多列数据
曲小强
05-28 732
<div class="block" v-for="(item,index) in formline.lists" :key="index"> <div>工具{{index+1}}</div> <div style="position: relative;"> <div style="display: flex;align-items: center;margin-bottom: 6px;"> .
用js生成N个不一样的随机数
xiaoLong2345的博客
10-28 6407
本人小白一枚，发表只为了共同学习。
JS向表格里添加数据
qq_45968325的博客
05-18 7605
题目： 1） 定义一个Student对象， 该对象有sname、age、sex、nickname、hobby几个属性 2） 构建数据，将班里所有学生的信息创建成对应的Student对象， 并将这些Student对象存储到数组中 3） 在页面定义一个table标签，并将表头（th）写好。 4） 在表格下方添加一个添加按钮，并给按钮添加一个点击事件。 每点击一次按钮，就通过JS动态添加一行学生信息到表格的尾部。 如果全部添加完成，提示用户“添加完成” 5） 在表格下方添加一个移除按钮，并给按钮添加一个点击事件
js实现动态添加内容
huihui_999的博客
11-24 2511
js事件委托
Vue代码示例，左边Tree，右边对Tree节点配置子表多条数据
03-29
本示例将深入探讨如何在Vue项目中实现一个左侧Tree组件，右侧展示所选Tree节点对应的子表，且支持显示多条数据。 首先，我们需要引入Vue.js和相应的Tree组件库。以Element UI为例，你需要在项目中安装它： ```bash...
【JavaScript源代码】vue列表数据删除后主动刷新页面及刷新方法详解.docx
12-29
在Vue.js应用中，当你需要在执行特定操作如删除或添加数据后刷新页面时，通常前端不会自动更新，因为Vue采用的是数据驱动视图的模式，仅当数据变化时才会更新视图。在这种情况下，我们可以采取手动刷新页面的方法。...
js根据数据条数，使表格每一行只显示三条数据，最后一行显示多余的数据。
程序猿_hw的博客
12-20 3638
 个人思路，仅供参考！ function show_spots_table(result) { //清空table表格 var spots = result.extend.pageInfo; var len = count(spots); var s = ""; var s1 =""; var i ...
html表格多行修改,js动态修改数据实现table相同行合并
weixin_36168780的博客
06-03 617
原table未合并单元格合并后table完整示例代码：时间课程//原始数据var list = [{time:'上午',course:'语文'},{time:'上午',course:'数学'},{time:'上午',course:'英语'},{time:'上午',course:'化学'},{time:'下午',course:'物理'},{time:'下午',course:'地理'},{time:'...
JS如何优雅的处理大批量数据？
ChaITSimpleLove的博客
11-02 5805
本文主要是针对JavaScript（以下简称JS）处理大批量数据时，产生性能问题的简要分析，以及如何优雅的演化提升性能的解决方案； 场景：假设有10W条数据量，需要相应业务处理并绑定渲染在html页面，如何一步一步的分析并优化 JS 的性能，提升数据处理速度； 假设我们需要处理的需求如下，从0到10W条数据通过ul>li的方式显示在html页面上： <!DOCTYPE html...
vue + element-ui Table的数据多选，多页选择数据回显，分页记录保存选中的数据
qq_32849999的博客
05-22 3772
参考：https://www.cnblogs.com/jiangweichao/p/9620940.html 业务的需要：我要对与会人员勾选，记录所选的与会人员，并且点击到别的页面上时也要记录所勾选的。第一次尝试，每次点击下一页数据都会清空。然后我就去element ui官网查看了api.实现如下： 在table一定要定义以下事件和列表属性： 　　1、row-key， 　　2、reserv...
js实现简单的动态添加或删除一行数据
氼兲戦S無撩
01-06 5405
js实现简单的动态添加或删除一行数据，（动态添加li）
用js实现动态添加表格数据
热门推荐
baidu_20876831的博客
06-12 6万+
第一种方式:&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=UTF-8&gt;&lt;title&gt;table&lt;/title&gt;&lt;style&gt;table {    margin:auto;    width: 60%;    border: 1px solid black;    border-c
avue-crud保存多条数据
最新发布
08-01
Avue-Crud是一个基于Vue.js的轻量级表格操作组件库，它提供了一套完整的增删改查功能，包括添加、查看、编辑和删除数据。当你需要保存多条数据时，通常有以下几个步骤： 1. **批量选择**：用户可以选择多行或多条...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值