如何获取表格中的数据并以json格式存储？

在开发的过程中，不一定所有数据都是单条存储的，有的时候也会出现将多条数据进行

整合，以另外一种形式存储数据库。

这篇文章介绍的就是将一个表格形式的数据转化成json格式进行存储。

此处给出的实例图如下：

可以看见这个表格中包含了input输入框，select选择框以及button删除按钮。需要实现的功能为将input输入框和select选择框中的数据进行存储，而button按钮选择不存储。

本文给出的思路是通过选择器得到tbody，然后再查找其中的tr，再通过tr选择其中的td进行逐层转换并逐层回传进行信息的整合。

源码如下：

Html代码：

<div class="panel panel-primary"><div class="panel-heading">信息表<button type="button" class="btn btn-default" οnclick="addItems()">添加项目      </button></div><div class="panel-body"><table class="table table-bordered table-hover" id="sampleTable"><thead>${tableMap}</thead><tbody></tbody></table></div><input type="hidden" value="" name="sampleInfo" id="sampleInfo">
</div>

Javascript代码：

function submit2() {var tbody = $("#sampleTable").find("tbody");changeTbodyToDetail(tbody);        $("#concreteForm").find("sampleInfo").val(changeTbodyToDetail(tbody));$("#concreteForm").submit();return false;}//结合本段js代码和html代码，可以看出这一方法是通过将表格信息进行格式转换后存储在属性为hidden的输入框中，在后台进行存储的。//从一个tbody中获取数据并置入隐藏域
function changeTbodyToDetail(tbody) {var result = "";tbody.find("tr").each(function () {var b = changeTrToDetail($(this));result = result + b + ";";});result = result.substring(0, result.length - 1);$("input[name='sampleInfo']").val(result);
}//从一个tr中获取数据
function changeTrToDetail(tr) {var result = "{";tr.find("td").each(function () {var a = changeTdToDetail($(this));if (a!=""){result = result + a + ",";}});result = result.substring(0, result.length - 1);result = result + "}";return result;
}//从一个td中获取一个数据
function changeTdToDetail(id) {var input = id.find("input[type='text']");if (input.length > 0) {var name = input.prop("name");var val = input.val();var result = name + ":\"" + val + "\"";return result;}else{var select = id.find("select");var name = select.prop("name");var val = select.val();if(name==undefined){return "";}else{var result = name + ":\"" + val + "\"";return result;}}
}

可以看出整个转换的方法是选择了嵌套的方法，把整个功能变成了changeTbodyToDetail、changeTrToDetail、changeTdToDetail三个方法。每一层的处理方法都不难理解，但是在changeTdToDetail中有几个细节是需要注意的，也是在调试过程中进行修改才完善的方法。

在changeTdToDetail中需要实现的功能是选择存储input输入框和select选择框的数据，拒绝录入button删除按钮。为实现这一功能，需要增加一个判断语句进行筛选。在本段代码中if判断筛选出了input输入框和非input输入框，前者进行数据存储，后者仍需要进一步判断。需要注意的是，select选择框不同于input输入框，不能用.length进行判断。而在addItems()中我们定义button控件不同于使用的另外两个控件，设置button没有name属性，此处就可以通过name属性进行下一步判断，如果为undefined即为按钮，返回一个空string，不为undefined则进行数据传值。

如何获取表格中的数据并以json格式存储？相关推荐

excel文件中的数据转化为json格式并输出json文件
1:需求: 将excel中的数据获取出来,转化为json格式,之后输出到.json文件中. 2:步骤: (1): 将excel中的数据获取出来,使用jsonObject转化为json格式字符串 (2) ...
python 爬虫获取bilibili search搜索数据，返回json格式
话不多说直接上代码测试用例 : 搜索java为关键词的时长在60分钟以上的视频 import requests import json import osheaders = {"user ...
如何使用python语言将txt中的数据转化成json格式的数据？
port_result.txt里面的文本内容如下: 怎么罚变道? 如何处罚变道? 怎样处理变道? 要怎么惩处变道? 应该怎么惩办变道? 法律怎么责罚变道? 到底怎么惩罚变道? 说一下怎么处置变道? 说 ...
laytpl遍历实体列表_Layui数据表格之获取表格中所有的数据方法
数据表格中的数据是通过直接赋值的方式.这里实际上思想是反过来的,将拿数据表格中的所有数据,转换为layui数据表格拿原始数据去渲染数据表格. 1.创建一个作用域合适的js对象数组用来保存数据表格中的原 ...
获取csv表格中的数据
一.使用绝对路径获取import pandas as pd # 绝对路径,获取表格中的数据 abs_path = r'C:\Users\test.csv' df = pd.read_csv(abs_p ...
java读取word表格中的数据_JAVA获取word表格中数据的方案
上一个项目的开发中需要实现从word中读取表格数据的功能,在JAVA社区搜索了很多资料,终于找到了两个相对最佳的方案,因为也得到了不少网友们的帮助,所以不敢独自享用,在此做一个分享. 两个方案分别是: ...
获取layui表格单元格的数据_Layui数据表格之获取表格中所有的数据方法
数据表格中的数据是通过直接赋值的方式.这里实际上思想是反过来的,将拿数据表格中的所有数据,转换为Layui数据表格拿原始数据去渲染数据表格. 1.创建一个作用域合适的JS对象数组用来保存数据表格中的原 ...
Java获取word表格中的数据
前言: 有时系统中需要提取各种文件中的数据,比如做报表的系统中就常常与Excel表格数据做交互.做Excel报表数据时有选择POI实现的,但是POI功能也很单一,对于文档格式维护性差,最重要的是POI ...
ajax异步获取数据后动态向表格中添加数据的页面
因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有看到现成的,决定自己写个例子 1.HTML页面 [html] view plaincopyp ...

如何获取表格中的数据并以json格式存储？

如何获取表格中的数据并以json格式存储？相关推荐

最新文章

热门文章