你的位置:首页 > Java教程

[Java教程]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数据发送到后台处理。

至此,我们获取表格中的多条数据并提交至服务器的代码就编写完了。