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">
<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" />
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="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnSubmit").click(function () {
var header = [];
var rows = [];
$("#tblCustomers tr th").each(function (i, th) {
header.push($(th).html());
});
$("#tblCustomers tr:has(td)").each(function (i, tr) {
var row = {};
$(tr).find('td').each(function (j, td) {
row[header[j]] = $(td).html();
});
rows.push(row);
});
alert(JSON.stringify(rows));
});
});
</script>
Screenshots
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.
Demo
Downloads
