表格转JSON

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

核心代码JavaScript代码：

方法一

方法二（第一步获取表格数据并储存在js数组中，第二步把js对象数组转化为JSON字符串）

　HTML代码

　CSS样式

　得到JSON数据如下

核心代码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"}]

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

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

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

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

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

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

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

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

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

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


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

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