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