表格转JSON

glacier_ 发表于 2022-2-14 13:22:32

如何将前端的可编辑表格，在未保存数据的情况下，将前端表格编辑的结果转为json字符串？

曹岩发表于 2022-2-14 13:22:33

核心代码JavaScript代码：方法一方法二（第一步获取表格数据并储存在js数组中，第二步把js对象数组转化为JSON字符串）　HTML代码　CSS样式　得到JSON数据如下

曹岩发表于 2022-2-14 13:27:02

核心代码JavaScript代码：方法一
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function sc () {
            var myTable=document.getElementById("myTable");
            //获取表格中的所有行
            var rows=myTable.rows;
            //获取第一行的所有列
            var title=rows.cells;
            var json="";
            for (var i=1;i<rows.length;i++) {
               var cells=rows.cells;//获取第i行中的所有列
               json+="{";
               //拼裝JSON字符串
               for (var j=0;j<cells.length;j++) {
                     json+="\""+title.innerHTML+"\":\""+cells.innerHTML+"\","
               }
               //运用substring()方法获取所需要的子串，去掉不需要的逗号
               json=json.substring(0,json.length-1)+"},"
            }
            json="["+json.substring(0,json.length-1)+"]";
            alert(json);
         }

方法二（第一步获取表格数据并储存在js数组中，第二步把js对象数组转化为JSON字符串）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function sc () {
            var trs = document.getElementsByTagName("tr"); //获取表格中的所有行
            var sum = [];//新建一个数组
            for(var i = 1; i < trs.length; i++) {
               var tds=trs.cells;//获取第i行的所有列
               var stu={};//新建一个对象
               //把属性和属性的值添加到对象中
               stu.编号=tds.innerHTML;
               stu.书名=tds.innerHTML;
               stu.单价=tds.innerHTML;
               sum.push(stu);//使用push方法把对象添加到数组中
            }
            document.write(JSON.stringify(sum));//把js对象数组转换成JSON字符串并输出
         }

　　HTML代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<table id="myTable" class="cart_table">
<tr class="cart_title">
   <td>编号</td>
   <td>书名</td>
   <td>单价</td>
</tr>
<tr>
   <td>1</td>
   <td>C程序设计语言</td>
   <td>50</td>
</tr>
<tr>
   <td>2</td>
   <td>并行程序设计</td>
   <td>80</td>
</tr>
<tr>
   <td>3</td>
   <td>C#设计模式</td>
   <td>100</td>
</tr>
</table>
<input type="button" onclick="sc()" value="获取表格数据生成JSON" />

　CSS样式
1
2
3
4
5
6
7
8
9
10
.cart_table {
   text-align: center;
   border-collapse: collapse;
}
.cart_title {
   background-color: #999999;
}
td {
   border: 1px solid;
}

　得到JSON数据如下
1
[{"编号":"1","书名":"C程序设计语言","单价":"50"},{"编号":"2","书名":"并行程序设计","单价":"80"},{"编号":"3","书名":"C#设计模式","单价":"100"}]

glacier_ 发表于 2022-2-14 13:35:31

曹岩发表于 2022-2-14 13:29
核心代码JavaScript代码：方法一方法二（第一步获取表格数据并储存在js数组中，第二步把js对象数组转化为JS ...

大佬太厉害了，666666，我研究一下，谢谢:handshake

David.Zhong 发表于 2022-2-14 14:27:33

大佬参考下这个帖子~
数据表导出为json格式
https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=133014&fromuid=63496
(出处: 葡萄城产品技术社区)

gczxxu 发表于 2022-9-1 23:37:01

David.Zhong 发表于 2022-2-14 14:27
大佬参考下这个帖子~
数据表导出为json格式
https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&ti ...

老大。。你这个不实用。。而且效率低。这些数据JS直接跨页面处理可以来的更快。减少服务器交互次数。。。希望官方出品。

David.Zhong 发表于 2022-9-2 09:55:02

好滴，我在帮大佬反馈一下~:lol

多科发表于 2024-2-23 15:15:28

曹岩发表于 2022-2-14 13:27
核心代码JavaScript代码：方法一

方法二（第一步获取表格数据并储存在js数组中，第二步把js对象数组转化 ...

大佬，这里能弄个dome不？不知道如何使用上面的例子

Lay.Li 发表于 2024-2-23 17:49:28

感谢各位大佬的支持~
代码我们也不是很擅长哈，您现在是想实现什么样的需求呢，为什么要将表格数据转为json呢，可以看看下方的帖子能不能帮助到您:loveliness:

分享活字格表格前端js数据导出（区分隐藏列，不导出隐藏列）实现方法
https://gcdn.grapecity.com.cn/showtopic-151496-1-1.html
(出处: 葡萄城开发者社区)

willning 发表于 2024-2-26 09:06:11

不写代码的话，可以先用数组操作命令创一个空数组，然后用循环命令读取表格的每一行，为其创建一个对象，Push到数组里，最后用JSON序列化命令把数组转换为JSON

页: [1] 2

葡萄城开发者社区's Archiver

表格转JSON