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 相关文章推荐
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
微博@符号的用户名提示效果。(想@到谁?)
Nov 05 Javascript
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
Sep 25 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 Javascript
JQuery的Pager分页器实现代码
May 03 Javascript
手机Web APP如何实现分享多平台功能
Aug 19 Javascript
利用bootstrapValidator验证UEditor
Sep 14 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
bootstrap switch开关组件使用方法详解
Aug 22 Javascript
详解Vue 全局引入bass.scss 处理方案
Mar 26 Javascript
vue中的router-view组件的使用教程
Oct 23 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具体实现代码
2010/10/12 PHP
php强制运行广告的方法
2014/12/01 PHP
js获取url参数的使用扩展实例
2007/12/29 Javascript
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
JS不间断向上滚动效果代码
2013/12/25 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
浅谈Redux中间件的实践
2018/07/27 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
python单例模式实例分析
2015/04/08 Python
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
用python编写第一个IDA插件的实例
2018/05/29 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
用Cython加速Python到“起飞”(推荐)
2019/08/01 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
python+requests接口自动化框架的实现
2020/08/31 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
入党自我鉴定范文
2013/10/04 职场文书
半年思想汇报
2013/12/30 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
促销活动总结怎么写
2014/06/25 职场文书
2014年绩效考核工作总结
2014/12/11 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android
Python MNIST手写体识别详解与试练
2021/11/07 Python
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js