In this article I will explain with an example, how convert HTML Table data to JSON using JavaScript.
 
 
HTML Markup
The following HTML Markup consists of an HTML Table and an HTML Button.
The Button has been assigned a JavaScript OnClick event handler which calls the Convert JavaScript function.
<table id="tblCustomers" cellspacing="0"  cellpadding="0">
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>1</td>
        <td>John Hammond</td>
        <td>United States</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Mudassar Khan</td>
        <td>India</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Suzanne Mathews</td>
        <td>France</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Robert Schidner</td>
        <td>Russia</td>
    </tr>
</table>
<hr/>
<input type="button" id="btnSubmit" value="Submit" onclick="Convert()" />
 
 
JavaScript function to convert HTML Table to JSON
When the Submit Button is clicked, the Convert JavaScript function is called.
Inside the Convert JavaScript function, the HTML Table is referenced using the document.getElementById JavaScript function.
Then, a loop will be executed over the HTML Table Header cells and the cell values are copied to an Array.
And then, another loop is executed over the HTML Table rows. Inside each row a child loop is executed over the cells and copied to a JavaScript object which is later added to a JavaScript Array.
Finally, the JavaScript Array is converted into a JSON string and displayed in JavaScript Alert Message Box.
<script type="text/javascript">
    function Convert() {
        var table = document.getElementById("tblCustomers");
        var header = [];
        var rows = [];
 
        for (var i = 0; i < table.rows[0].cells.length; i++) {
            header.push(table.rows[0].cells[i].innerHTML);
        }
 
        for (var i = 1; i < table.rows.length; i++) {
            var row = {};
            for (var j = 0; j < table.rows[i].cells.length; j++) {
                row[header[j]] = table.rows[i].cells[j].innerHTML;
            }
            rows.push(row);
        }
 
        alert(JSON.stringify(rows));
    }
</script>
 
 
Screenshots
The HTML Table
Convert HTML Table data to JSON using JavaScript
 
The converted JSON
Convert HTML Table data to JSON using JavaScript
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code