Js Object to JSONString

最新推荐文章于 2025-05-17 16:57:51 发布

Fabuler

最新推荐文章于 2025-05-17 16:57:51 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript json 文章标签： json js

本文链接：https://blog.youkuaiyun.com/Fabuler/article/details/25705291

javascript 同时被 2 个专栏收录

11 篇文章

订阅专栏

json

2 篇文章

订阅专栏

本文介绍了一种将HTML表格数据转换为JSON格式的方法，并通过JavaScript实现。该方法首先获取表格的头部信息作为JSON对象的键，然后遍历表格的每一行，将其内容转化为键值对形式的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目开发中遇到需要将前端的table数据传到后台进行保存的问题，网上查了很多都没找到解决办法，最后只好把table对象转换成JSON字符串传给后台。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
        function tableToJson(){
            var myTable=document.getElementById("myTable");
            var maxRows=myTable.rows.length;
            var maxCells=myTable.rows[0].cells.length;

            var data=[];
            var headers=[];

            for(var i=0;i<maxCells;i++){
                headers[i]=myTable.rows[0].cells[i].innerHTML;
            }

            for(var i=1;i<maxRows;i++){
                var tableRow=myTable.rows[i];
                var rowData={};
                for(var j=0;j<tableRow.cells.length;j++){
                    rowData[headers[j]]=tableRow.cells[j].innerHTML;
                }
                data.push(rowData);
            }

            document.getElementById("result").value=JSON.stringify(data);
        }
    </script>
</head>
<body>
<button  onclick="tableToJson();">Add</button>
<table id="myTable">
    <tbody>
    <tr><th>name</th><th>age</th><th>sex</th></tr>
    <tr><td>Fabuler</td><td>25</td><td>man</td></tr>
    <tr><td>Mangood</td><td>98</td><td>not</td></tr>
    <tr><td>Kelliye</td><td>18</td><td>fem</td></tr>
    </tbody>
</table>
<input id="result" size="100"/>
</body>
</html>

其中的代码可参考 JOHN DYER'S CODE，我只进行了简单的修改。