找回密码
 立即注册

QQ登录

只需一步，快速开始

首页 › 活字格专区 › 求助中心 › 查看内容
发新帖

glacier_

中级会员

68

主题

192

帖子

912

积分

中级会员

积分
912
最新发帖

[已处理] 表格转JSON

glacier_
中级会员   /  发表于：2022-2-14 13:22  /   查看：4241  /  回复：10
1金币
如何将前端的可编辑表格，在未保存数据的情况下，将前端表格编辑的结果转为json字符串？

最佳答案

曹岩

查看完整内容

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

10 个回复

倒序浏览
最佳答案
最佳答案
曹岩
注册会员   /  发表于：2022-2-14 13:22:33
来自 3#
核心代码JavaScript代码：
方法一
方法二（第一步获取表格数据并储存在js数组中，第二步把js对象数组转化为JSON字符串）
　HTML代码
　CSS样式
　得到JSON数据如下

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有帐号？立即注册

x
回复 使用道具 举报
曹岩
注册会员   /  发表于：2022-2-14 13:27:02
2#
核心代码JavaScript代码：
方法一
[size=1em]
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[0].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[j].innerHTML+"\":\""+cells[j].innerHTML+"\","
                    }
                    //运用substring()方法获取所需要的子串，去掉不需要的逗号
                    json=json.substring(0,json.length-1)+"},"
                }
                json="["+json.substring(0,json.length-1)+"]";
                alert(json);
            }



方法二（第一步获取表格数据并储存在js数组中，第二步把js对象数组转化为JSON字符串）
[size=1em]
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[0].innerHTML;
                    stu.书名=tds[1].innerHTML;
                    stu.单价=tds[2].innerHTML;                  
                    sum.push(stu);//使用push方法把对象添加到数组中
                }
                document.write(JSON.stringify(sum));//把js对象数组转换成JSON字符串并输出
            }




　　HTML代码
[size=1em]
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样式
[size=1em]
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数据如下
[size=1em]
1

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




回复 使用道具 举报
glacier_
中级会员   /  发表于：2022-2-14 13:35:31
4#
曹岩 发表于 2022-2-14 13:29
核心代码JavaScript代码：方法一方法二（第一步获取表格数据并储存在js数组中，第二步把js对象数组转化为JS ...

大佬太厉害了，666666，我研究一下，谢谢
回复 使用道具 举报
David.Zhong讲师达人认证 悬赏达人认证 活字格认证
论坛元老   /  发表于：2022-2-14 14:27:33
5#
大佬参考下这个帖子~
数据表导出为json格式
https://gcdn.grapecity.com.cn/fo ... 4&fromuid=63496
(出处: 葡萄城产品技术社区)
回复 使用道具 举报
gczxxu
银牌会员   /  发表于：2022-9-1 23:37:01
6#
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
7#
好滴，我在帮大佬反馈一下~
回复 使用道具 举报
多科
注册会员   /  发表于：2024-2-23 15:15:28
8#
曹岩 发表于 2022-2-14 13:27
核心代码JavaScript代码：方法一

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

大佬，这里能弄个dome不？不知道如何使用上面的例子
回复 使用道具 举报
Lay.Li悬赏达人认证 活字格认证
超级版主   /  发表于：2024-2-23 17:49:28
9#
感谢各位大佬的支持~
代码我们也不是很擅长哈，您现在是想实现什么样的需求呢，为什么要将表格数据转为json呢，可以看看下方的帖子能不能帮助到您


分享活字格表格前端js数据导出（区分隐藏列，不导出隐藏列）实现方法
https://gcdn.grapecity.com.cn/showtopic-151496-1-1.html
(出处: 葡萄城开发者社区)
回复 使用道具 举报
willning
超级版主   /  发表于：2024-2-26 09:06:11
10#
不写代码的话，可以先用数组操作命令创一个空数组，然后用循环命令读取表格的每一行，为其创建一个对象，Push到数组里，最后用JSON序列化命令把数组转换为JSON
回复 使用道具 举报
下一页 »
12下一页
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
产品与服务
活字格低代码平台
Wyn 商业智能软件
SpreadJS纯前端表格控件
技术服务体系
技术博客
低代码技术
客户与案例
典型客户
成功案例
用户访谈
合作与生态
合作伙伴网络
葡萄城市场
葡萄城与国产化
活字格用友客开工具
品牌活动
葡萄城公开课
品牌战略发布会
赋能开发者高峰论坛
企业级低代码发展研讨会
企业级低代码应用大赛
表格技术研讨会
了解葡萄城
葡萄城简介
愿景使命
研发与创新
荣誉奖项
加入我们
联系方式
联系我们
400-657-6008

葡萄城社区二维码

关注“葡萄城社区”

赋能开发者

西安葡萄城软件有限公司
专业的软件开发技术和低代码平台提供商

陕ICP备2020018819号  |   陕公网安备：61019002000258  |   隐私政策  |   网站地图  

邮箱： info.xa@grapecity.com  |  © 2024 葡萄城软件，保留所有权利

Archiver| 手机版| 小黑屋|

返回顶部