JS实现动态生成表格并提交表格数据向后端


Posted in Javascript onNovember 25, 2020

本文实例介绍了JS实现动态生成表格并向后端提交表格数据的相关代码,分享给大家供大家参考,具体内容如下

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

那么我们首先需要解决的是动态生成表格的问题

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

<script src="../js/jqui/jquery/jquery-1.5.2.min.js" type="text/javascript"></script>

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;" onclick="removeTr('+num+')">删除</a>'
   +'<a id="edit'+num+'" class="edit" style="cursor: pointer; color: blue;" onclick="editDataByOne('+num+')">修改</a>'
   +'<a id="save'+num+'" class="hide" style="cursor: pointer; color: blue;" onclick="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="添加" onclick="addTable();">
 <input type="button" value="提交" onclick="save();">
 </div>

我们可以看到在Table标签的外层我们加了一层form标签,并设置form标签的id。

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

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

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值,表示是否到了当前行的最后一个input
  t = true;
 }
 }
 if(!msg2[i].match("canshu5")){ //同上
 json+=";";
 }
   
}
json+="]";
//最终msg的值就被转换为:[{"key":"value";"key":"value"},{"key":"value";"key":"value"}]格式的json数据

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

至此,我们获取表格中的多条数据并提交至服务器的代码就编写完了,希望对大家的学习有所帮助。

Javascript 相关文章推荐
js几个不错的函数 $$()
Oct 09 Javascript
JS之小练习代码
Oct 12 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
Dec 19 Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
Javascript获取某个月的天数
May 30 Javascript
通过实例解析js简易模块加载器
Jun 17 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
Jan 27 #Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 #Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 #Javascript
不用一句js代码初始化组件
Jan 27 #Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 #Javascript
封装属于自己的JS组件
Jan 27 #Javascript
js+css绘制颜色动态变化的圈中圈效果
Jan 27 #Javascript
You might like
PHP中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
解读PHP的Yii框架中请求与响应的处理流程
2016/03/17 PHP
[原创]图片分页查看
2006/08/28 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
JS控制文本域只读或可写属性的方法
2016/06/24 Javascript
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
node网页分段渲染详解
2016/09/05 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
python中关于日期时间处理的问答集锦
2013/03/08 Python
对于Python装饰器使用的一些建议
2015/06/03 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
python和c语言哪个更适合初学者
2020/06/22 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
python实现简单猜单词游戏
2020/12/24 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021/03/02 Python
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
银行营业厅大堂经理岗位职责
2014/01/06 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
网络信息安全承诺书
2014/03/26 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
跑吧孩子观后感
2015/06/10 职场文书
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android