将 HTML 表格转换为 Json 文件答案

【问题标题】：Convert HTML Table to Json file将 HTML 表格转换为 Json 文件
【发布时间】：2016-01-02 05:56:47
【问题描述】：

是否可以像这样将 HTML 表格转换为 json：

姓名性别年龄

约翰 M 18

迈克 M 19

json：

     {"Values" : {

    "1" : {
                "name": "John",
                "Gender": "M",
                "Age": "18"
            },

    "2": {
                "name": "Mike",
                "Gender": "M",
                "Age": "19"
            },
}}

我已经有了这个代码：

    (function() {
    var jsonArr = [];
    var obj = {};
    var thNum = document.getElementsByTagName('th').length;
    var arrLength = document.getElementsByTagName('td').length;

    for(i = 0; i<arrLength;i++){
        if(i%thNum==0){
            obj = {};
        }
        var head = document.getElementsByTagName('th')[i%thNum].innerHTML;
        var content = document.getElementsByTagName('td')[i].innerHTML;
        obj[head] = content;
        if(i%thNum==0){
            jsonArr.push(obj);
        }   
    }           
    document.write("<br>"+JSON.stringify(jsonArr));
})();

脚本转换这个：

    <!DOCTYPE html>
<TABLE border="3" rules="all" bgcolor="#E7E7E7" cellpadding="1" cellspacing="1">
<TR>
<TH align=center><font size="3" face="Arial">Date</font></TH>
<TH align=center><font size="3" face="Arial"><B>Teacher</B></font></TH>
<TH align=center><font size="3" face="Arial">?</font></TH>
<TH align=center><font size="3" face="Arial">Hour</font></TH>
<TH align=center><font size="3" face="Arial">Subject</font></TH>
<TH align=center><font size="3" face="Arial">Class</font></TH>
<TH align=center><font size="3" face="Arial">Room</font></TH>
<TH align=center><font size="3" face="Arial">(Teacher)</font></TH>
<TH align=center><font size="3" face="Arial">(Room)</font></TH>
<TH align=center><font size="3" face="Arial">XYY</font></TH>
<TH align=center><font size="3" face="Arial"><B>Information</B></font></TH>
<TH align=center><font size="3" face="Arial">(Le.) nach</font></TH>
</TR>
<TR><TD align=center><font size="3" face="Arial">24.9.</font></TD>
<TD align=center><font size="3" face="Arial"><B><strike>Dohe</strike></B></font></TD>
<TD align=center><font size="3" face="Arial">Free</font></TD>
<TD align=center><font size="3" face="Arial">1</font></TD>
<TD align=center><font size="3" face="Arial"><strike>Math</strike></font> </TD>
<TD align=center><font size="3" face="Arial">(9)</font> </TD>
<TD align=center><font size="3" face="Arial">---</font> </TD>
<TD align=center><font size="3" face="Arial"><strike>Dohe</strike></font></TD>
<TD align=center><font size="3" face="Arial">A001</font></TD>
<TD align=center>&nbsp;</TD>
<TD align=center>&nbsp;</TD>
<TD align=center><font size="3" face="Arial">Free.</font></TD>
</TR>
</TABLE>
<script>
(function() {
    var jsonArr = [];
    var obj = {};
    var thNum = document.getElementsByTagName('th').length;
    var arrLength = document.getElementsByTagName('td').length;

    for(i = 0; i < arrLength; i++){
        if(i%thNum === 0){
            obj = {};
        }
        var head = document.getElementsByTagName('th')[i%thNum].innerHTML;
        var content = document.getElementsByTagName('td')[i].innerHTML;
        obj[head] = content;
        if(i%thNum === 0){
            jsonArr.push(obj);
        }   
    }           
    document.write("<br>"+JSON.stringify(jsonArr));
})();
</script>
</body>
</html>

到这里：

[{"Date":"24.9.","Teacher":"Dohe","?":"Free","Hour":"1","Subject":"Math ","Class":"(9) ","Room":"--- ","(Teacher)":"Dohe","(Room)":"A001","XYY":" ","Information":" ","(Le.) nach":"Free."}]

但我需要之前的“Values”标签和“1”、“2”，它们应该按行自动创建。至少可以将它写入一个新的 .json 文件，比如 data.json 吗？

【问题讨论】：

提供一个示例表作为代码的输入和示例输出

标签： javascript php html json converter

【解决方案1】：

如果要将行数组表示为对象，请将jsonArr.push(obj) 更改为jsonObj[++rowIx] = obj，其中jsonObj 之前已初始化为{}，rowIx 是已初始化为的计数器0（可能比在i 上做数学更简单）。

您发布的预期输出不是有效的 JSON，所以我假设它应该被另一组大括号包裹：

document.write("<br>"+JSON.stringify({"Values": jsonObj}));

至于保存到文件，以可移植方式执行此操作很棘手。还有其他几个答案可以解决这个问题，包括：

【讨论】：

<script> (function() { var jsonArr = []; var obj = {}; var jsonObj = {}; var thNum = document.getElementsByTagName('th').length; var arrLength = document.getElementsByTagName('td').length; for(i = 0; i < arrLength; i++){ if(i%thNum === 0){ obj = {}; } var head = document.getElementsByTagName('th')[i%thNum].innerHTML; var content = document.getElementsByTagName('td')[i].innerHTML; obj[head] = content; if(i%thNum === 0){ jsonObj[rowIx] = obj; } } document.write("<br>"+JSON.stringify({"Values": jsonObj})); })(); </script> 喜欢这样吗？它不起作用...
您没有初始化或增加计数器 (rowIx)。
现在我添加了var rowIx = {};，但现在它只显示一行和 [object Object] 而不是 1 个左右。它还显示最后一行而不是第一行。
rowIx 是一个计数器，一个计数 1、2、...的数字；我会更新答案以使这一点更清楚。
谢谢！现在它完全按照我的需要工作。最后一个问题：我可以将此 json 保存到服务器上的文件中吗？数据.json？无需用户进行任何工作即可查看该网站？