请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

glacier_

中级会员

68

主题

192

帖子

912

积分

中级会员

积分
912
最新发帖

[已处理] 表格转JSON

glacier_
中级会员   /  发表于:2022-2-14 13:22  /   查看:4187  /  回复: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下一页
您需要登录后才可以回帖 登录 | 立即注册
返回顶部