table-to-json

Table To JSON

jQuery plugin to serialize HTML tables into javascript objects.

Links

• Demo: https://lightswitch05.github.io/table-to-json/
• Plunker Template: https://plnkr.co/edit/iQFtcEEZkvsMJ2UqcrlW?p=preview

CDN

It is recommended to pull this tool into your project directly. But if you insist to use a CDN, here is one:

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

    javascript复制

    $('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();
      }
    });

    javascript复制

    $('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:

    javascript复制

    $('table').tableToJSON({
      extractor : {
        0 : function(cellIndex, $cell) {
          return $cell.find('em').text();
        },
        1 : function(cellIndex, $cell) {
          return $cell.find('span').text();
        }
      }
    });

  • Default: null

Example

  
    

      First Name
      Last Name
      Points

  
  
    

      Jill
      Smith
      50

    

      Eve
      Jackson
      94

    

      John
      Doe
      80

    

      Adam
      Johnson
      67

  

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