In this article I will explain with an example, how convert HTML Table data to JSON using jQuery.
HTML Markup
The following HTML Markup consists of an HTML Table and an HTML Button.
<table id="tblCustomers" cellspacing="0" cellpadding="0">
        <td>John Hammond</td>
        <td>United States</td>
        <td>Mudassar Khan</td>
        <td>Suzanne Mathews</td>
        <td>Robert Schidner</td>
<input type="button" id="btnSubmit" value="Submit" />
Converting HTML Table to JSON using jQuery
Inside the jQuery document ready event handler, the Button has been assigned a jQuery Click event handler.
When the Submit Button is clicked, a jQuery each loop will be executed over the HTML Table Header cells and the cell values are copied to an Array.
And then, another jQuery each loop is executed over the HTML Table rows. Inside each row a child jQuery each 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" src=""></script>
<script type="text/javascript">
    $(function () {
        $("#btnSubmit").click(function () {
            var header = [];
            var rows = [];
            $("#tblCustomers tr th").each(function (i, th) {
            $("#tblCustomers tr:has(td)").each(function (i, tr) {
                var row = {};
                $(tr).find('td').each(function (j, td) {
                    row[header[j]] = $(td).html();
The HTML Table
Convert HTML Table data to JSON using jQuery
The converted JSON
Convert HTML Table data to JSON using jQuery
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.