原文地址

需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存。

首先动态生成表格。

1.首先我们需要导入JS库文件。jQuery

2.然后在页面div中事先创建一个空白表格,可以根据需求而定,我这里是一个带表头的表格

<table border="0" style="text-align: center;" width="100%" id="myTable"><tr><td width="150px;">表头1</td><td width="150px;">表头2</td><td width="150px;">表头3</td><td width="150px;">表头4</td><td width="150px;">表头5</td><td width="150px;">操作</td></tr>
</table>

3.表格创建好后,我们就可以写动态生成表格的关键代码了。我们写一个js方法供触发使用

var num = 0;function addTable(){var tableHtml ="";tableHtml += '<tr id="tr'+num+'">'+'<td><input class="addtd" id="cnashu1'+num+'" style="width:150px;" type="text" name="cnashu1" /></td>'+'<td><input class="addtd" id="cnashu2'+num+'" style="width:150px;" type="text" name="cnashu2"/></td>'+'<td><input class="addtd" id="cnashu3'+num+'" style="width:150px;" type="text" name="cnashu3"/></td>'+'<td><input class="addtd" id="cnashu4'+num+'" style="width:150px;" type="text" name="cnashu4"/></td>'+'<td><input class="addtd" id="cnashu5'+num+'" style="width:150px;" type="text" name="cnashu5"/></td>'+'<td><a style="cursor: pointer; color: blue;" οnclick="removeTr('+num+')">删除</a>'+'<a id="edit'+num+'" class="edit" style="cursor: pointer; color: blue;" οnclick="editDataByOne('+num+')">修改</a>'+'<a id="save'+num+'" class="hide" style="cursor: pointer; color: blue;" οnclick="saveByOne('+num+')">保存</a>'+'</td>'+'</tr>';var elements = $("#myTable").children().length;  //表示id为“mtTable”的标签下的子标签的个数$("#myTable").children().eq(elements - 1).after(tableHtml); //在表头之后添加空白行num++;   }

  我们可以看到在<tb>标签中我们添加了<input>标签,主要是用来提供用户输入参数, 而全局变量num,主要是用来区分每一个添加的参数的id的唯一性而存在的。

4.接下来我们对表格进行操作

//删除行
function removeTr(trNum){$("#tr"+trNum).remove();
}
//编辑行
function editDataByOne(trNum){$this = $("#tr"+trNum);$(".addtd",$this).removeAttr("readonly");
}
//保存行
function saveByOne(trNum){$this = $("#tr"+trNum);$(".addtd",$this).attr("readonly","readonly");
}

  

上面我们对表格进行了删除,编辑,保存等操作,具体操作内容可以根据需求调整。(其实后来我发现可以不需要全局num,也可以实现对添加行的操作,至于怎么实现,主要是一些js的操作,有空再研究吧)

至此,我们动态生成表格的页面代码就完结了。
上半篇我们讲到了如何动态生成表格,接下来我们就讲一下如何获取表格中的多条数据,并提交至后台服务器

在开发之前我也在网上找了一些资料,要么太简洁,要么看不懂,但是他们大多数都提到了使用Json的方式将多个参数传入后台,那么我就根据这个思路编写了如下的代码。

1.首先我们来看一下如何获得表格中的数据,还是结合上边的例子

<div><form id="submitForm"><table border="0" style="text-align: center;" width="100%" id="myTable"><tr><td width="150px;">表头1</td><td width="150px;">表头2</td><td width="120px;">表头3</td><td width="120px;">表头4</td><td width="80px;">表头5</td><td width="100px;">操作</td></tr></table></form><input type="button" value="添加" οnclick="addTable();"><input type="button" value="提交" οnclick="save();"></div>

2.接下来我们根据jQuery的“serialize()”方法获取表格中input标签的参数

var msg = $("#submitForm").serialize();  //获得后的msg的值:canshu1=xxx&canshu2=xxx&canshu3=xxx&canshu4=xxx&canshu5=xx

3.拿到表格中的数据后,我们根据它值的形式把它转换成json格式的数据

var json = "[{";
var msg2 = msg.split("&");   //先以“&”符号进行分割,得到一个key=value形式的数组
var t = false;
for(var i = 0; i<msg2.length; i++){var msg3 = msg2[i].split("=");  //再以“=”进行分割,得到key,value形式的数组for(var j = 0; j<msg3.length; j++){json+="\""+msg3[j]+"\"";if(j+1 != msg3.length){json+=":";}if(t){json+="}";if(i+1 != msg2.length){  //表示是否到了当前行的最后一列json+=",{";}t=false;}if(msg3[j] == "canshu5"){  //这里的“canshu5”是你的表格的最后一列的input标签的name值,表示是否到了当前行的最后一个inputt = true;}}if(!msg2[i].match("canshu5")){  //同上json+=";";}}
json+="]";

  通过上述代码,我们已经成功的将表格中的多条数据转换成了json格式的数据,那么我们就可以通过ajax的方式将Json数据发送到后台处理。

转载于:https://www.cnblogs.com/GetLastError/p/7773261.html

JS实现动态生成表格并提交表格数据向后端 表格中数据转为json相关推荐

  1. 通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里

    本人公众号上线啦!!! 公众号与博客名一样:没有腹肌的程序猿 公众号文章类型:工作上所遇到的需求实现方案分享. 此外也会提供一些数据集供大家使用.(这个还在规划中,毕竟打工人时间挺紧的,哈哈哈哈) 到 ...

  2. iden中html中表格自动生成,JS实现动态生成html table表格的方法分析

    本文实例讲述了JS实现动态生成html table表格的方法.分享给大家供大家参考,具体如下: 刚在论坛上面逛的时候看到有人问html表格怎么动态生成,我回了一下发现有好多小伙伴追问- - 看来还是有 ...

  3. 爬虫:破解同花顺网js加密动态生成请求中所需要的cookie

    看了半天帖子都是都是通过selenium破解js加密的,个人感觉用selenium破解js加密效率太低,而且繁琐,根据目前业务需求就自己研究了一下同花顺的js加密. 通过接口测试工具直接请求接口发现获 ...

  4. js object 动态生成key

    需要生成一个js object <span style="white-space:pre"> </span>var param = {"taskT ...

  5. js前端动态生成变量及python后端动态生成变量接收

    前端代码: let sbmt = function(data){layui.use('layer', function() {var layer = layui.layer;$.ajax({url: ...

  6. ajax动态选项卡,如何将动态生成的ajax内容附加到jquery ui选项卡中新添加的选项卡?...

    我在侧面板上有以下表格的表格: one two three four 当有人点击该列的某一行时,该行的标题将作为参数传递给在主面板中显示搜索结果的函数. $("#content-displa ...

  7. 动态生成多条插入语句 存入文本文档中

    写一个程序,能够动态生成多条插入语句如:insert into MyStudents values("人名1",年龄,'男',分数1,分数2).将生成的插入语句输出到记事本文件 S ...

  8. JS实现动态生成表格

    html和css body><input type="text" id="input1" placeholder="请输入行" ...

  9. vue+element 动态生成二维码并选择批量打印表格内容

    下载生成二维码的插件(vue-qr) vue-qr npm install vue-qr --save 下载打印库(printJS) PrintJS npm install print-js --sa ...

最新文章

  1. mysql多语句查询结果_MySQL查询从多个选择语句获取结果?
  2. oracle数据连接出现 login denied 问题
  3. Struts2_day02--封装数据到集合里面
  4. JS 无法清除Cookie的解决方法
  5. mysql 主主互备实现
  6. Cesium Workshop
  7. mysql事务最大个数_事务、mysql数据库的默认最大连接数、分页
  8. 【EF】EF框架 Code First Fluent API
  9. C#验证字符串是否是数字,是否包含中文,是否是邮箱格式,是否是电话格式
  10. CorelDRAW2022标准专业订阅版下载及功能介绍
  11. 【C语言】Linux 文件读写
  12. 如何在高通平台新建项目
  13. [1] Instances as Queries
  14. 2021-12-11每日刷题打卡
  15. MySQL数据库学习笔记(2)
  16. Python 语法错误 except Exception, e: ^ SyntaxError: invalid syntax
  17. windows10配置openvino
  18. Docker报错Error spawning command line “dbus-launch --autolaunch=xxx --binary-syntax --close-stderr”
  19. AOP切面获取参数的一个小技巧
  20. 基于二维码的室内定位技术(一)——原理

热门文章

  1. UA OPTI570 量子力学 原子结构基础 公式与结论总结
  2. 高德地图 JS API - 根据地名实现标记定位
  3. python学习日记day2
  4. WIN7无法记住远程登录密码
  5. 多媒体应用-swift
  6. jsp 学习 第2步 - tag 使用
  7. numix Docky
  8. USACO 3.2 kimbits DP
  9. R中rJava包载入时报错的问题
  10. textarea限制输入长度