Serializes HTML tables into JSON objects.
MIT License
jQuery plugin to serialize HTML tables into javascript objects.
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>
data-override="overridden column name"
th
and td
tagsdata-override="new value"
rowspan
and colspan
ignoreColumns
[]
onlyColumns
ignoreColumns
when provided.null
- all columnsignoreHiddenRows
true
ignoreEmptyRows
false
headings
<tr>
null
allowHTML
false
includeRowId
boolean
or a string
. If true
, the the id
attribute on the table's <tr>
elements will be included in the JSON as rowId
. To override the name rowId
, supply a string of the name you would like to use.false
textDataOverride
textExtractor
extractor
extractor
Function : function that is used on all tbody cells to extract text from the cells; a value in data-override
will 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 colspan
cells into account!) of the table; a value in data-override
will 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>
npm
package manager.npm install
from app root directory.
package.json
for a full list.npm install -g grunt-cli
.grunt
to run tests and create a new build in /lib
.develop
branch.Colin Tremblay is working on a PHP implementation at HTML-Table-To-JSON
allowHTML
option and various other changes.headings
option.rowspan
& colspan
support. Also adding the textExtractor
& dataOverride
feature!includeRowId
support.ignoreEmptyRows
option.rowspan
& colspan
bug.extractor
feature!ignoreEmptyRows
and ignoreColumns
options