Convert HTML Table to Json

Question

Is it possible to convert a HTML table to json like this:

Name Gender Age

John M 18

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

A Programm that we uses generates us a HTM file, wich I want to convert. But I've never seen such a Format before :D. Most of the time im an iOS developer. My Table in HTML Look like this:

<TABLE border="3" rules="all" bgcolor="#E7E7E7" cellpadding="1" cellspacing="1">
<TR>
<TD align=center><font size="3" face="Arial">
Date
</font> </TD>
<TD align=center><font size="3" face="Arial">
<B>Teacher</B>
</font> </TD>
<TD align=center><font size="3" face="Arial">
?
</font> </TD>
<TD align=center><font size="3" face="Arial">
Hour
</font> </TD>
<TD align=center><font size="3" face="Arial">
Subject
</font> </TD>
<TD align=center><font size="3" face="Arial">
Class    </font> </TD>
<TD align=center><font size="3" face="Arial">
Room
</font> </TD>
<TD align=center><font size="3" face="Arial">
(Teacher)
</font> </TD>
<TD align=center><font size="3" face="Arial">
(Room)
</font> </TD>
<TD align=center><font size="3" face="Arial">
XYY
</font> </TD>
<TD align=center><font size="3" face="Arial">
<B>Information</B>
</font> </TD>
<TD align=center><font size="3" face="Arial">
(Le.) nach
</font> </TD>
</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><TR>

With a little extra work to pass the resultant object to json, this could help you: https://github.com/Sergeon/jQuery-tableSerializer — Sergeon, Sep 24 '15 at 11:04
Possible duplicate of: http://stackoverflow.com/questions/6271856/html-table-to-json. — Danny Fardy Jhonston Bermúdez, Sep 24 '15 at 15:03
Possible duplicate of [HTML Table to JSON](https://stackoverflow.com/questions/6271856/html-table-to-json) — Makyen, Jan 18 '19 at 07:15

user3024814 · Accepted Answer · 2015-09-24T14:58:36.270

JavaScript:

(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));
})();

http://jsfiddle.net/decv1vs2/1/

Or in your case:

http://jsfiddle.net/decv1vs2/2/ (change headers to or add classes)

Tank you so much ! Is it also possible to convert ist in a Json like this: `[{ "People" : { "1" : { "Date":"24.9.", "Teacher":"Dohe"} "2" : { "Date":"23.9.", "Teacher":"Part"} } }]` The number 1, 2 etc. should be generated for each row. — Marius Schönefeld, Oct 04 '15 at 17:14

score 0 · Answer 2 · answered Sep 24 '15 at 09:04

0

Try this:

$('#btnid').click( function() {
 var table = $('#tableid').tableToJSON();  
});

answered Sep 24 '15 at 09:04

Phpdev 2014

22
6

Convert HTML Table to Json

2 Answers2