JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Table to Json

    Serializes HTML tables into JSON objects.
    Filed under 

    • 🔾37%Overall
    • 692
    • 24.2 days
    • 🕩154
    • 👥11

    Table To JSON

    Build Status license

    jQuery plugin to serialize HTML tables into javascript objects.

    CDN

    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/table-to-json@1.0.0/lib/jquery.tabletojson.min.js" integrity="sha256-H8xrCe0tZFi/C2CgxkmiGksqVaxhW0PFcUKZJZo1yNU=" crossorigin="anonymous"></script>
    

    Features

    • Automatically finds column headings
      • Override found column headings by using data-override="overridden column name"
      • Always uses first row as column headings regardless of th and td tags
    • Override cell values column names by using data-override="new value"
    • Ignorable columns
    • Not confused by nested tables
    • Works with rowspan and colspan

    Options

    • ignoreColumns
      • Array of column indexes to ignore.
      • Default: []
    • onlyColumns
      • Array of column indexes to include, all other columns are ignored. This takes presidence over ignoreColumns when provided.
      • Default: null - all columns
    • 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
    • allowHTML
      • Boolean if HTML tags in table cells should be preserved
      • Default: false
    • includeRowId
      • Either a 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.
      • Default: false
    • textDataOverride
      • String containing data-attribute which contains data which overrides the text contained within the table cell
      • Default: 'data-override'
    • textExtractor
      • alias of 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

    Example

    <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>
    

    Contributing

    • Install Node.js.
      • this will also the npm package manager.
    • run npm install from app root directory.
      • This installs grunt and other dependencies See package.json for a full list.
    • run npm install -g grunt-cli.
    • run grunt to 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 develop branch.

    Looking for a server-side solution?

    Colin Tremblay is working on a PHP implementation at HTML-Table-To-JSON

    Special Thanks

    • imamathwiz for adding allowHTML option and various other changes.
    • nenads for adding headings option.
    • Mottie for adding rowspan & colspan support. Also adding the textExtractor & dataOverride feature!
    • station384 for adding includeRowId support.
    • dayAlone for adding ignoreEmptyRows option.
    • danielapsmaior for discovering and fixing a rowspan & colspan bug.
    • koshuang for adding extractor feature!
    • noma4i added feature "Skip columns where headers are not present"
    • cn-tools for reporting AND fixing a bug when using both ignoreEmptyRows and ignoreColumns options
    Show All