通过table批量提交数据

最新推荐文章于 2021-06-18 13:24:59 发布

原创最新推荐文章于 2021-06-18 13:24:59 发布 · 4.8k 阅读

6 ·

CC 4.0 BY-SA版权

本文介绍了一种不使用表单而直接利用表格进行批量数据提交的方法。通过JavaScript动态生成表格元素并收集数据，最终以JSON格式提交至后台。适用于需要批量处理数据的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天遇到需要批量提交数据的情况，不能使用表单，表单只能一个个提交，尝试过用表单包裹住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("保存失败");
            }
        }
    });


}