JS实现动态生成表格并提交表格数据向后端 表格中数据转为json
原文地址
需求:在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相关推荐
- 通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里
本人公众号上线啦!!! 公众号与博客名一样:没有腹肌的程序猿 公众号文章类型:工作上所遇到的需求实现方案分享. 此外也会提供一些数据集供大家使用.(这个还在规划中,毕竟打工人时间挺紧的,哈哈哈哈) 到 ...
- iden中html中表格自动生成,JS实现动态生成html table表格的方法分析
本文实例讲述了JS实现动态生成html table表格的方法.分享给大家供大家参考,具体如下: 刚在论坛上面逛的时候看到有人问html表格怎么动态生成,我回了一下发现有好多小伙伴追问- - 看来还是有 ...
- 爬虫:破解同花顺网js加密动态生成请求中所需要的cookie
看了半天帖子都是都是通过selenium破解js加密的,个人感觉用selenium破解js加密效率太低,而且繁琐,根据目前业务需求就自己研究了一下同花顺的js加密. 通过接口测试工具直接请求接口发现获 ...
- js object 动态生成key
需要生成一个js object <span style="white-space:pre"> </span>var param = {"taskT ...
- js前端动态生成变量及python后端动态生成变量接收
前端代码: let sbmt = function(data){layui.use('layer', function() {var layer = layui.layer;$.ajax({url: ...
- ajax动态选项卡,如何将动态生成的ajax内容附加到jquery ui选项卡中新添加的选项卡?...
我在侧面板上有以下表格的表格: one two three four 当有人点击该列的某一行时,该行的标题将作为参数传递给在主面板中显示搜索结果的函数. $("#content-displa ...
- 动态生成多条插入语句 存入文本文档中
写一个程序,能够动态生成多条插入语句如:insert into MyStudents values("人名1",年龄,'男',分数1,分数2).将生成的插入语句输出到记事本文件 S ...
- JS实现动态生成表格
html和css body><input type="text" id="input1" placeholder="请输入行" ...
- vue+element 动态生成二维码并选择批量打印表格内容
下载生成二维码的插件(vue-qr) vue-qr npm install vue-qr --save 下载打印库(printJS) PrintJS npm install print-js --sa ...
最新文章
- mysql多语句查询结果_MySQL查询从多个选择语句获取结果?
- oracle数据连接出现 login denied 问题
- Struts2_day02--封装数据到集合里面
- JS 无法清除Cookie的解决方法
- mysql 主主互备实现
- Cesium Workshop
- mysql事务最大个数_事务、mysql数据库的默认最大连接数、分页
- 【EF】EF框架 Code First Fluent API
- C#验证字符串是否是数字,是否包含中文,是否是邮箱格式,是否是电话格式
- CorelDRAW2022标准专业订阅版下载及功能介绍
- 【C语言】Linux 文件读写
- 如何在高通平台新建项目
- [1] Instances as Queries
- 2021-12-11每日刷题打卡
- MySQL数据库学习笔记(2)
- Python 语法错误 except Exception, e: ^ SyntaxError: invalid syntax
- windows10配置openvino
- Docker报错Error spawning command line “dbus-launch --autolaunch=xxx --binary-syntax --close-stderr”
- AOP切面获取参数的一个小技巧
- 基于二维码的室内定位技术(一)——原理