js对象定义，表格数据转成json上传提交

最新推荐文章于 2022-05-23 11:55:46 发布
最新推荐文章于 2022-05-23 11:55:46 发布
阅读量1.7k 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/javadhh/article/details/50865403
版权
这篇博客探讨了如何在JavaScript中处理表格数据，包括添加和删除行的操作。主要内容集中在将整个表格数据转化为JSON格式，并通过点击事件实现一键上传到服务器，以支持立即上线的功能。文中附带了操作前后的效果图示例。
摘要由CSDN通过智能技术生成

添加页面js:

<script type="text/javascript">
/**新建一个缘分图片对象**/
function createFateImg(imgUrl,linkType,link,orderNum ,valid){  
 		var obj = new Object;  
 		obj.imgUrl =imgUrl;  
		obj.linkType = linkType;  
 		obj.link = link;  
 		obj.orderNum = orderNum;
 		obj.valid = valid; 
 		obj.toDataHtml = function(){  
   		var dataHtml = '<tr>'+
			'<td align="center"> <img src="'+ this.imgUrl +'" width="300px" height="100px"/></td>'+
			'<td align="center"> <input type="text" style="text-align: center; width:99%;" value="'+  this.linkType + '"/></td>'+
			'<td align="cen
最低0.47元/天 解锁文章
wive
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js将excel转化成json 对象
01-17
js 将excel转成json对象，提交到后台。 主要用于前端.
form表单转Json提交方法
chimeiyan8610的博客
02-22 650
先将表单数值转换成数组存储，存储成的格式为[{"name":"","value":""},.....}] var formArray = $("#form").serializeArray(); 将formArray转换成Json格式或者标准格式数组 1 2 3...
js将表格数据转换成json
wh591344741的专栏
05-07 1683
var materia = document.getElementById('material');//表格id var sendName = new Array(); var trs = materia.getElementsByTagName("tr"); var inputNames = trs[1].getElementsByTagName("input"); for(var i
前端上传表格，变成可处理的JSON数据
weixin_48034401的博客
05-10 491
前言：在对于刚刚入行的前端小伙伴们，对于项目功能我相信肯定有一种心态，后台能处理的数据就都有后台来处理，前端不做任何处理最好，哈哈， 1.前端处理的数据不能持久化，就算是数据持久化也都是依赖h5的新特性，做本地存贮一个是存在浏览器缓存上面（Session），一种则是通过浏览器存在电脑的硬盘上面（Local），这对前端处理数据大大的有点难度 2.依赖了接口这样每次调用接口来处理这个数据，感觉方便了很多，但是后端又不愿意了，哈哈 ——> 哔哔一大堆， 废话不多说上代码 //下载依赖 yarn add x
JS自动把JSON数据转换成表格
05-28
可以直接将JSON数据生成表格 生成的表格可以是HTML字符串 也可以是OBJECT 操作简单，三步即可实现数据转换成表格。
基于python实现把json数据转换成Excel表格
12-20
这个场景中，我们需要将JSON数据转换成Excel表格，这是Python中一个实用且频繁的需求。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，广泛用于网络API和数据存储。而Excel则是一个常用的电子表格...
C# Excel转Json或Js数据格式工具
07-04
4. **转换为Js数据格式**：转换为JavaScript数据格式通常意味着保持与Json类似的键值对结构，但可能需要处理JavaScript特有的语法，例如将日期转换为JavaScript日期对象的表示方式。 5. **输出和保存**：最后，转换...
jQuery树状json数据转表格插件代码
06-10
在网页开发中，数据展示是不可或缺的一部分，而jQuery作为一个广泛使用的JavaScript库，为开发者提供了丰富的功能，包括将树状结构的JSON数据转换成表格。本文将深入探讨如何使用jQuery实现这个功能，以及介绍一个名...
Layui数据表格 前后端json数据接收的方法
10-16
在本文中，我们将深入探讨如何在Layui框架下实现数据表格与前后端之间的JSON数据交互。Layui是一款轻量级的前端组件库，它提供了丰富的UI组件，包括数据表格，用于展示和操作数据。在前后端分离的开发模式中，数据的...
Vue 实现把表单form数据 转化成json格式的数据
12-13
目的：Vue 中 把表单form数据 转化成json格式的数据 第一步：创建一个数据集（就是你表单需要的数据） 如果你表单都是一些正常的数据，比如 text 什么的。你定义好数据集，就去用 v-model 绑定数据。这样就可以实现...
js实现上传excel解析返回json到页面显示
06-09
js实现excel文件上传解析，返回json并显示到页面 支持两种格式
JS解析Excel为JSON到后台详细解说文档和文件
12-20
最近项目中遇到需要从指定格式的Excel中批量导入数据到后台解析处理,如果传文件到后端解析太麻烦，所以直接使用JS将Excel解析为JSON传到后台，直接处理JSON字符串就好了，附件是说明文档和脚本，如何使用附件中也有说明。
dwz 个人学习笔记（三）dialog弹出框,最小化，弹出位置，dialog中刷新dialog
阿昊的博客
09-15 1296
最近由于项目需要，使用JS控制最小化，和弹出位置。情景是：在某个位置打开一个dialog的同时，关闭制定的弹窗。 不是多难，我封装了一下，有需要的可以直接用。 在dwz.dialog.js 添加以下代码： /*** * 跟据弹窗的唯一id,最小化窗口 * @param dialog dialogId * 2017.09
js json 提交
hejias的专栏
04-21 627
var random; var ids; //添加文件 监听 function addRow(){ var rom=changeRandom(); var txt2=getFileText(); var divfilelist = document.getElementById("divfilelist"); var f = document.createElement('di
如何快速将WPS表格或者excel数据将表格转化为json
任磊
05-23 1万+
如何快速将WPS表格或者excel数据将表格转化为json
DWZ-Dialog调整位置
深海里的鱼的博客
08-16 2208
DWZ调整窗口的位置
js Form表单转json格式，及后台接收（多种方法）
热门推荐
qq_40138785的博客
08-09 6万+
  一、serialize()方法 格式：var data = $("#formID").serialize(); 功能：将表单内容序列化成一个字符串。 注意：要使用params = decodeURIComponent(data ,true)进行解码，不然中文数据会乱码。 数据示例：Name=小明&amp;Age=22&amp;Sex=男 后台：获取字符串后，可以到后台进行处理数据。...
做了个把XML或JSON转成Excel的在线工具
fxsjy的专栏
08-06 1万+
点击：http://xmlgrid.appspot.com
前端的表格数据怎么转换成list<studentVo>传到后端
最新发布
04-30
通常情况下，前端的表格数据是以JSON格式传输到后端的。在前端，可以使用JavaScript将表格数据转换为JSON格式，然后通过Ajax请求将JSON数据发送到后端。在后端，则可以使用相应的框架或工具将JSON数据转换为Java对象，如使用Jackson库将JSON数据转换为Java对象。 例如，假设前端表格中有以下表头和数据： | 学号 | 姓名 | 年龄 | | ---- | ---- | ---- | | 001 | 张三 | 18 | | 002 | 李四 | 19 | | 003 | 王五 | 20 | 则可以使用以下JavaScript代码将表格数据转换为JSON格式： ```javascript var tableData = []; // 定义一个空数组用于存储表格数据 var tableRows = document.querySelectorAll('table tbody tr'); // 获取表格中所有行 for (var i = 0; i < tableRows.length; i++) { var rowData = {}; // 定义一个空对象用于存储当前行的数据 var tableCells = tableRows[i].querySelectorAll('td'); // 获取当前行中所有单元格 rowData['id'] = tableCells[0].innerText; // 将第一列数据存入id属性 rowData['name'] = tableCells[1].innerText; // 将第二列数据存入name属性 rowData['age'] = tableCells[2].innerText; // 将第三列数据存入age属性 tableData.push(rowData); // 将当前行数据存入数组 } var jsonData = JSON.stringify(tableData); // 将表格数据转换为JSON字符串 ``` 在后端，可以使用以下Java代码将JSON数据转换为Java对象： ```java import com.fasterxml.jackson.databind.ObjectMapper; import java.util.List; public class StudentController { public void saveStudents(String jsonData) { ObjectMapper objectMapper = new ObjectMapper(); try { List<StudentVo> studentList = objectMapper.readValue(jsonData, new TypeReference<List<StudentVo>>(){}); // 将studentList保存到数据库中或进行其他操作 } catch (IOException e) { e.printStackTrace(); } } } ``` 其中，`StudentVo`是一个Java类，用于存储学生的信息。需要注意的是，需要在后端引入Jackson库，以便将JSON数据转换为Java对象。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值