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数据发送到后台处理。

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