通过table批量提交数据

今天遇到需要批量提交数据的情况，不能使用表单，表单只能一个个提交，尝试过用表单包裹住table之后提交，包裹住tr后提交，发现，在每个tr中包裹一个form元素，如果是直接写死的页面，可以通过$("#ID")获取form内数据，如果是通过js动态生成，用append拼接就可以获取，如果是通过字符串拼接，则不能获取form内数据。

但是有个问题，用append拼接处的页面，样式混乱，因此，直接使用table批量提交数据，记录一下：

<script type="text/javascript">
    function createModal(r){
    /*<tr>
    <form>
    <td>
    <input name=xxx>
    <td>
    <td>
    <input name=xxx>
    <td>
    <form>
    <tr>*/

        var Ch = "CH";
        var dtypeKey = r.tblDevice.dtypeKey;
        var deviceId = r.tblDevice.deviceId;
        var unitCode = r.tblDevice.unitCode;
        var verifyCode = r.tblDevice.verifyCode;
        var deviceName = r.tblDevice.deviceName;
        /*var trTd=$("<tr><form></form></tr>");
        //var formTd=$("<form></form>");
        var tdTd=$("<td></td>");
        var variName = $("<input style ='width:100%;height: 100%' name='variName'>");
        var variType = $("<input style ='width:100%;height: 100%' name='variType'>");
        var variUnit = $("<input style ='width:100%;height: 100%' name='variUnit'>");
        var NBIOT = $("<input style ='width:100%;height: 100%' name='NBIOT' type='text' readonly='readonly' value='"+verifyCode+"'>");
        var deviceId = $("<input style ='width:100%;height: 100%' name='deviceId' type='text' readonly='readonly' value='"+deviceId+"'>");
        var unitCode = $("<input style ='width:100%;height: 100%' name='unitCode' type='text' readonly='readonly' value='"+unitCode+"'>");
        var ruserName = $("<input style ='width:100%;height: 100%' name='ruserName'>");
        var ruserNum = $("<input style ='width:100%;height: 100%' name='ruserNum'>");
        var ruserPhone = $("<input style ='width:100%;height: 100%' name='ruserPhone'>");
        var ruserAddress = $("<input style ='width:100%;height: 100%' name='ruserAddress'>");
        var ruserNeibo = $("<input style ='width:100%;height: 100%' name='ruserNeibo'>");
        var tdTd1=tdTd.append(variName);
        var tdTd2=tdTd.append(variType);
        var tdTd3=tdTd.append(variUnit);
        var tdTd4=tdTd.append(NBIOT);
        var tdTd5=tdTd.append(deviceId);
        var tdTd6=tdTd.append(unitCode);
        var tdTd7=tdTd.append(ruserName);
        var tdTd8=tdTd.append(ruserNum);
        var tdTd9=tdTd.append(ruserPhone);
        var tdTd10=tdTd.append(ruserAddress);
        var tdTd11=tdTd.append(ruserNeibo);
        if(dtypeKey=="Single-Port"){

            for(var i =1;i<2;i++) {
                var ChName = Ch+i;
                var ch = $("<input style ='width:100%;height: 100%' name='CH' type='text' readonly='readonly' value='"+ChName+"'>");
                var tdTd0 = tdTd.append(ch);

                trTd.append(tdTd0).append(tdTd1)
                    .append(tdTd2)
                    .append(tdTd3)
                    .append(tdTd4)
                    .append(tdTd5)
                    .append(tdTd6)
                    .append(tdTd7)
                    .append(tdTd8)
                    .append(tdTd9)
                    .append(tdTd10)
                    .append(tdTd11).appendTo("#variTable tbody");
            }
        }else if(dtypeKey=="Four-Port"){
            for(var i =1;i<5;i++){
                var ChName = Ch+i;
                var ch = $("<input style ='width:100%;height: 100%' name='CH' type='text' readonly='readonly' value='"+ChName+"'>");
                var tdTd0 = tdTd.append(ch);
                trTd.append(tdTd0).append(tdTd1)
                    .append(tdTd2)
                    .append(tdTd3)
                    .append(tdTd4)
                    .append(tdTd5)
                    .append(tdTd6)
                    .append(tdTd7)
                    .append(tdTd8)
                    .append(tdTd9)
                    .append(tdTd10)
                    .append(tdTd11).appendTo("#variTable tbody");
            }

        }else{
            for (var i = 1;i<9;i++){
                var ChName = Ch+i;
                var ch = $("<input style ='width:100%;height: 100%' name='CH' type='text' readonly='readonly' value='"+ChName+"'>");
                var tdTd0 = tdTd.append(ch);
                trTd.append(tdTd0).append(tdTd1)
                    .append(tdTd2)
                    .append(tdTd3)
                    .append(tdTd4)
                    .append(tdTd5)
                    .append(tdTd6)
                    .append(tdTd7)
                    .append(tdTd8)
                    .append(tdTd9)
                    .append(tdTd10)
                    .append(tdTd11).appendTo("#variTable tbody");
            }
        }*/
        var varit = '';
        var tr = "<tr>";
        if(dtypeKey=="Single-Port"){
            tr +="<td><input style ='width:100%;height: 100%' name='variCh' type='text' readonly='readonly' value='"+(Ch+1)+"'></td>"+
                "<td><input style ='width:100%;height: 100%' name='variName'></td>"+
                "<td><input style ='width:100%;height: 100%' name='variType'></td>"+
                "<td><input style ='width:100%;height: 100%' name='variUnit'></td>"+
                "<td><input style ='width:100%;height: 100%' name='verifycode' type='text' readonly='readonly' value='"+verifyCode+"'></td>"+
                "<td><input style ='width:100%;height: 100%' name='deviceid' type='text' readonly='readonly' value='"+deviceId+"'></td>"+
                "<td><input style ='width:100%;height: 100%' name='unitCode' type='text' readonly='readonly' value='"+unitCode+"'></td>"+
                "<td><input style ='width:100%;height: 100%' name='ruserName'></td>"+
                "<td><input style ='width:100%;height: 100%' name='ruserCode'></td>"+
                "<td><input style ='width:100%;height: 100%' name='ruserMobile'></td>"+
                "<td><input style ='width:100%;height: 100%' name='ruserAddress'></td>"+
                "<td><input style ='width:100%;height: 100%' name='ruserNeibor'></td>"+"</tr>";
            /*"<td><text style ='width:100%;height: 100%' name='Data'></td>"+
            "<td><text style ='width:100%;height: 100%' name='time'></td></tr>";*/
            varit += tr;
        $("#variTable tbody").html(varit);
        }else if(dtypeKey=="Four-Port"){
            for(var i =1;i<5;i++){
                var ChName = Ch+i;
                tr +="<td><input style ='width:100%;height: 100%' name='variCh' type='text' readonly='readonly' value='"+ChName+"'></td>"+
                    "<td><input style ='width:100%;height: 100%' name='variName'></td>"+
                    "<td><input style ='width:100%;height: 100%' name='variType'></td>"+
                    "<td><input style ='width:100%;height: 100%' name='variUnit'></td>"+
                    "<td><input style ='width:100%;height: 100%' name='verifycode' type='text' readonly='readonly' value='"+verifyCode+"'></td>"+
                    "<td><input style ='width:100%;height: 100%' name='deviceid' type='text' readonly='readonly' value='"+deviceId+"'></td>"+
                    "<td><input style ='width:100%;height: 100%' name='unitCode' type='text' readonly='readonly' value='"+unitCode+"'></td>"+
                    "<td><input style ='width:100%;height: 100%' name='ruserName'></td>"+
                    "<td><input style ='width:100%;height: 100%' name='ruserCode'></td>"+
                    "<td><input style ='width:100%;height: 100%' name='ruserMobile'></td>"+
                    "<td><input style ='width:100%;height: 100%' name='ruserAddress'></td>"+
                    "<td><input style ='width:100%;height: 100%' name='ruserNeibor'></td>"+"</tr>";

            }
            varit += tr;
            $("#variTable tbody").html(varit);
        }else {
            for (var i = 1;i<9;i++){
                var ChName = Ch+i;
                tr +="<td><input style ='width:100%;height: 100%' name='variCh' type='text' readonly='readonly' value='"+ChName+"'></td>"+
                    "<td><input style ='width:100%;height: 100%' name='variName'></td>"+
                    "<td><input style ='width:100%;height: 100%' name='variType'></td>"+
                    "<td><input style ='width:100%;height: 100%' name='variUnit'></td>"+
                    "<td><input style ='width:100%;height: 100%' name='verifycode' type='text' readonly='readonly' value='"+verifyCode+"'></td>"+
                    "<td><input style ='width:100%;height: 100%' name='deviceid' type='text' readonly='readonly' value='"+deviceId+"'></td>"+
                    "<td><input style ='width:100%;height: 100%' name='unitCode' type='text' readonly='readonly' value='"+unitCode+"'></td>"+
                    "<td><input style ='width:100%;height: 100%' name='ruserName'></td>"+
                    "<td><input style ='width:100%;height: 100%' name='ruserCode'></td>"+
                    "<td><input style ='width:100%;height: 100%' name='ruserMobile'></td>"+
                    "<td><input style ='width:100%;height: 100%' name='ruserAddress'></td>"+
                    "<td><input style ='width:100%;height: 100%' name='ruserNeibor'></td>"+"</tr>";
            }
            varit += tr;
            $("#variTable tbody").html(varit);
        }
        $("#variModal").modal({
            backdrop: "static"
        });

    }

以上是table生成：

以下是table数据获取，并提交到后台，测试后台已经获取到数据：

function saveVari(){
    var objArray = new Array();
    //获取tbody下的所有tr原素
    var tr = $("#variTable tbody").find("tr");
    //循环tr原素
    $.each(tr,function (i,f) {
        //找到所有input
        var inputs= $(f).find('input');
        //新建对象
        var obj ={};
        //循环所有inputs，把input中的name和value变成对象中的属性和值
        for(var j = 0;j<inputs.length;j++){
            var o = inputs[j];
            obj[$(o).attr('name')] = $(o).val();
        }
        //将对象放入对象数组
        objArray.push(obj);
    });
    $.ajax({
        url:baseURL+"sys/variable/saveVari",
        type:"POST",
        contentType:"application/json",
        data:JSON.stringify(objArray),
        success:function(r){
            if (r.code==0){
                alert("保存成功");
            }else{
                alert("保存失败");
            }
        }
    });


}