jQuery plugin to serialize HTML tables into javascript objects.
- Demo: https://lightswitch05.github.io/table-to-json/
- Plunker Template: https://plnkr.co/edit/iQFtcEEZkvsMJ2UqcrlW?p=preview
It is recommended to pull this tool into your project directly. But if you insist to use a CDN, here is one:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/jquery.tabletojson.min.js" integrity="sha256-H8xrCe0tZFi/C2CgxkmiGksqVaxhW0PFcUKZJZo1yNU=" crossorigin="anonymous"></script>
- Automatically finds column headings
- Override found column headings by using
data-override="overridden column name" - Always uses first row as column headings regardless of
thandtdtags
- Override found column headings by using
- Override cell values column names by using
data-override="new value" - Ignorable columns
- Not confused by nested tables
- Works with
rowspanandcolspan
ignoreColumns- Array of column indexes to ignore.
- Default:
[]
onlyColumns- Array of column indexes to include, all other columns are ignored. This takes presidence over
ignoreColumnswhen provided. - Default:
null- all columns
- Array of column indexes to include, all other columns are ignored. This takes presidence over
ignoreHiddenRows- Boolean if hidden rows should be ignored or not.
- Default:
true
ignoreEmptyRows- Boolean if empty rows should be ignored or not.
- Default:
false
headings- Array of table headings to use. When supplied, treats entire table as values including the first
<tr> - Default:
null
- Array of table headings to use. When supplied, treats entire table as values including the first
allowHTML- Boolean if HTML tags in table cells should be preserved
- Default:
false
includeRowId- Either a
booleanor astring. Iftrue, the theidattribute on the table's<tr>elements will be included in the JSON asrowId. To override the namerowId, supply a string of the name you would like to use. - Default:
false
- Either a
textDataOverride- String containing data-attribute which contains data which overrides the text contained within the table cell
- Default: 'data-override'
textExtractor- alias of
extractor
- alias of
extractor-
Function : function that is used on all tbody cells to extract text from the cells; a value in
data-overridewill prevent this function from being called. Example:$('table').tableToJSON({ extractor : function(cellIndex, $cell) { // get text from the span inside table cells; // if empty or non-existant, get the cell text return $cell.find('span').text() || $cell.text(); } });
$('table').tableToJSON({ extractor : function(cellIndex, $cell) { return { name: $cell.find('span').text(), avatar: $cell.find('img').attr('src') }; } });
-
Object : object containing a zero-based cell index (this does not take
colspancells into account!) of the table; a value indata-overridewill prevent this function from being called. Example:$('table').tableToJSON({ extractor : { 0 : function(cellIndex, $cell) { return $cell.find('em').text(); }, 1 : function(cellIndex, $cell) { return $cell.find('span').text(); } } });
-
Default:
null
-
<table id='example-table'>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th data-override="Score">Points</th></tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td data-override="disqualified">50</td></tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td></tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td></tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td></tr>
</tbody>
</table>
<script type="text/javascript">
// Basic Usage
var table = $('#example-table').tableToJSON();
// table == [{"First Name"=>"Jill", "Last Name"=>"Smith", "Score"=>"disqualified"},
// {"First Name"=>"Eve", "Last Name"=>"Jackson", "Score"=>"94"},
// {"First Name"=>"John", "Last Name"=>"Doe", "Score"=>"80"},
// {"First Name"=>"Adam", "Last Name"=>"Johnson", "Score"=>"67"}]
// Ignore first column (name)
var table = $('#example-table').tableToJSON({
ignoreColumns: [0]
});
// table == [{"Last Name"=>"Smith", "Score"=>"disqualified"},
// {"Last Name"=>"Jackson", "Score"=>"94"},
// {"Last Name"=>"Doe", "Score"=>"80"},
// {"Last Name"=>"Johnson", "Score"=>"67"}]
</script>- Install Node.js.
- this will also the
npmpackage manager.
- this will also the
- run
npm installfrom app root directory.- This installs grunt and other dependencies See
package.jsonfor a full list.
- This installs grunt and other dependencies See
- run
npm install -g grunt-cli. - run
gruntto run tests and create a new build in/lib. - Make the changes you want.
- Make tests for the changes.
- Submit a pull request, please submit to the
developbranch.
Colin Tremblay is working on a PHP implementation at HTML-Table-To-JSON
- imamathwiz for adding
allowHTMLoption and various other changes. - nenads for adding
headingsoption. - Mottie for adding
rowspan&colspansupport. Also adding thetextExtractor&dataOverridefeature! - station384 for adding
includeRowIdsupport. - dayAlone for adding
ignoreEmptyRowsoption. - danielapsmaior for discovering and fixing a
rowspan&colspanbug. - koshuang for adding
extractorfeature! - noma4i added feature "Skip columns where headers are not present"
- cn-tools for reporting AND fixing a bug when using both
ignoreEmptyRowsandignoreColumnsoptions
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent