簡體   English   中英

將 HTML 表格轉換為 Json 文件

[英]Convert HTML Table to Json file

是否可以像這樣將 HTML 表轉換為 json:

姓名 性別 年齡

約翰 M 18

邁克 M 19

傑森:

     {"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."}]

但是我之前需要“值”標簽,而“1”、“2”應該是按行自動創建的。 至少可以將它寫入一個新的 .json 文件,如 data.json 嗎?

如果要將行數組表示為對象, jsonArr.push(obj)更改為jsonObj[++rowIx] = obj ,其中jsonObj之前已初始化為{} ,而rowIx是已初始化為的計數器0(可能比在i上做數學更簡單)。

您發布的預期輸出不是有效的 JSON,所以我假設它應該被另一組大括號包裹:

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

至於保存到文件,以可移植的方式做到這一點很棘手。 還有其他幾個答案可以解決這個問題,包括以下內容:

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM