通过table批量提交数据

最新推荐文章于 2025-10-24 10:37:31 发布
原创 最新推荐文章于 2025-10-24 10:37:31 发布 · 4.8k 阅读 · 6 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文介绍了一种不使用表单而直接利用表格进行批量数据提交的方法。通过JavaScript动态生成表格元素并收集数据，最终以JSON格式提交至后台。适用于需要批量处理数据的场景。

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


}
伺服定位精度上不去？可能是你的多摩川协议解析没做对（附STM32F4完整代码）
最新发布
weixin_30628801的博客
05-21 337
本文深入解析多摩川协议在伺服控制系统中的关键作用，揭示定位精度不足的常见原因，并提供基于STM32F4的完整解决方案。从协议帧结构、CRC校验到DMA优化，详细介绍了提升通讯稳定性的实用技巧，帮助工程师实现±0.01mm的高精度定位。
PostgreSQL 9.5.4数据库快速INSERT大量数据研究
weixin_30810239的博客
12-06 3757
PostgreSQL 9.5.4数据库快速INSERT大量数据研究 背景 在一些应用场景中，需要向PostgreSQL数据库中快速装入大量的数据，比如数据库迁移，SQL日志分析等。在PG上快速插入数据有几种方案？每种方案的效率怎么样？如何调优能加快的数据装载？ 场景设定 SQL日志分析是一个采集JDBC日志、分析SQL、发送分析结果工具。在分析阶段，需要解析大量的JDBC日志，并把解析后的结构化结...
asp 如何同时提交多条记录进行保存？
giantjian的专栏
06-02 1334
<br />假如你有5个text文本框<br />那么:<br /><%<br />for i=1 to 5<br />title=request("title"&i)<br />content=request("content"&i)<br />co
关于asp中多条记录提交的问题?
haoshanshan的专栏
09-09 834
        在asp 中,一条记录的提交入库很容易,可如果想一次提交多条记录呢,是不是只能通过设置一个循环变量来实现.可如果下次提交的记录大于这个变量,难道非要修改这个变量才行吗?
asp实现批量录入数据
魔拉宝
04-21 1759
请看如下源代码：向数据库写入数据 SUB writeData() dim recCnt,i dim fieldName1,fieldName2,fieldName3 dim conn dim sqlStr,connStr connStr="Provider=SQLOLEDB.1;Initial Catalog=myDatabase;Data Source=myhon;User Id=sa;P
Asp 多行表单，每行输入数据后自动计算结果
weixin_30364147的博客
09-21 585
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title></head><body><script language="JavaScript" type="text...
vue el-table表格数据编辑，取消编辑数据还原，批量提交编辑修改数据
weixin_43965143的博客
08-14 7045
el-table 切换选中，表格数据编辑，编辑/取消按钮切换，取消编辑数据还原，批量提交修改数据 // 表格部分 <el-button type="primary" @click="submit()">提交修改</el-button> <el-table ref="multipleTable" :data="tableData" stripe @selection-change="ha
PostgreSQL数据库如何快速插入大量数据
顺其自然~专栏
10-24 65
1）批量提交比单个提交快55%2）异步提交比同步提交快40%3）不记录日志提交比同步提交快75%3）记录日志且同步提交时，后建立索引比先建立索引快40%4）记录日志且异步提交时，后建立索引比先建立索引快35%5）不记录日志时，后建立索引比先建立索引略快，但差别不大unlogged table + 多线程批量insert+后建索引在insert过程中，维护索引的时间占总时间的35%到40%，且主要花费在日志持久化上。
PostgreSQL数据库如何快速插入大量数据_postgresql 大批量插入
2401_87378079的博客
09-22 1162
数据库CPU参数 | max_worker_processes:16 |
4种方法让SpringMVC接收多个对象
热门推荐
一个情绪猿的脖克...
07-10 17万+
问题背景： 我要在一个表单里同时一次性提交多名乘客的个人信息到SpringMVC，前端HTML和SpringMVC Controller里该如何处理？ 第1种方法：表单提交，以字段数组接收； 第2种方法：表单提交，以BeanListModel接收； 第3种方法：将Json对象序列化成Json字符串提交，以List接收； 第4种方法：将表单对象序列化成Json字符串提交，以List接收； 第4种方
HTML多种表格方式提交数据
qq_30347133的博客
01-25 3623
&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt; &lt;%@ taglib prefix="s" uri="/struts-tags"%&gt; &lt;%@page import="com.bean.system.UserBean"%&
对Table的操作(赋值、动态新增行、删除行、保存table中多行数据对象
weixin_34060741的博客
11-11 611
一、成品界面：二、功能点描述从后台传list对象，前台table展示。可添加行操作，新增或者删除行。三、源码：Form表单：<form id="reportForm" method="post"><table class="table-grid table-list" cellpadding="1" cellspacing="1" id="reportTab...
element table表格实现编辑并后台提交数据
s990420的博客
08-09 3530
element table表格实现编辑并后台提交数据
asp 怎么实现可以同时添加多条记录
songpujian的专栏
05-31 2623
 大家好,我的表单是这样的,就是我同时想录入三条数据,在填完一条以后,我点击继续添加,再出现一条空的,让我继续添加,我好急啊,希望各位帮忙,代码如下self="inputzqgl.asp"tabname="tab_2007_5"TABCAP="辽河油田重点注汽锅炉运行情况表[数据录入]"%>1 then dw=session("dw")%>td         { font-siz
Element UI Table实现可编辑表格+校验 的方式进行提交
lchmyhua88的博客
08-22 3770
在一些场景下面，我们需要对table来进行编辑，就像表单一样使用，可能还会带验证。本文vue+elementui实现动态添加行/可编辑的table，文中示例代码介绍的非常详细，大家也可以参照一下：
table列表操作栏 提交数据时
m0_55249356的博客
10-20 490
提交数据时
antd表单如何提交table表单项数据
hzxOnlineOk的博客
03-20 797
在这个例子中，我们使用了Form.List来渲染一个表单字段的列表，其中字段的name属性是动态生成的，以便每行表格数据都能以数组的形式被提交。每个单元格中的输入框被包裹在Form.Item组件中，以便能够收集数据。当用户点击提交按钮时，表单的数据将被收集并通过onFinish回调函数发送到服务器。在Ant Design中，如果你想要提交一个表单，其中包含表格（Table）中的数据，你可以使用Form组件和Table组件的特性来实现。
用jQuery.form实现批量输入控件的提交
aijava_1990的博客
11-11 566
页面表单代码如下： form id="form1" action="/AjaxDemo/BatchAddCustomer.cspx" method="post"> p>b>批量新增客户资料b>p> table border="0"> tr>td>Nametd>td>Agetd>td>Addresstd>td>Teltd>td>Emailtd>tr> tr>td
form表单和table表格（html部分）
m0_74377868的博客
03-29 1029
form表单form表单，它是用于指定表单数据的提交方式和地址。其具有以下几种属性：用于指定表单的名称，方便后续提交使用。：表单的唯一名称，一般用于提交或样式设置。：用于定义表单数据的提交地址。：用于指定表单数据的提交方式。：以get方式进行提交，所提交的数据会在浏览器地址栏中显示，这种提交方式所提交的数据不能超过4K大小，适用与内容较小的数据提交。：以post方式进行提交，这种提交方式会把数据放到请求头中，而不会在浏览器地址栏中显示，理论上这种方式提交没有大小的限制。5.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值