/row-merge

Merge identical table rows jQuery plugin.

Primary LanguageTypeScriptOtherNOASSERTION

row-merge

Merge identical table rows jQuery plugin.

JSFiddle

Easily merge identical table cells in adjacent rows:

  • cells in adjacent rows with identical text and colspan are merged.
  • provide your own matcher function to customize behavior.
  • ability to exclude rows in any column from being merged.

original

merged (exclude merging column 4)

Usage

  1. Load jQuery and the plugin bundle in your HTML code. 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
...
<script src="row-merge-bundle.min.js"></script>
  2. Define a <table> element in your HTML code.
  3. Use jQuery to target the <table> and apply the plugin. The HTML is replaced by the plugin in the DOM. 
    <script>
  $(function () {
    $('#table').rowMerge();
  });
</script>
  4. Or append the class row-merge to the table element and have it be targeted automatically. 
    <table class="row-merge" ...>

Options

The following indexed parameters can be passed to rowMerge() at construction.

  • matcher - a function of the form function(thisCell: HTMLTableCellElement, otherCell: HTMLTableCellElement) => boolean that accepts two HTMLTableCellElement arguments and returns true if they "match", otherwise returns false. The implementation is up to the user. Adjacent rows with identical colspan that "match" will be merged into thisCell. default behavior: test cell text for equality.
  • excludedColumns - column indicies to exclude from merging. default=[]
  • zeroIndexed - whether columns are zero-indexed or not. default=false

API

The following methods are exposed on the plugin:

  • unmerge() - unmerges the table to original definition in HTML source.
  • merge() - applies this plug-in and replaces HTML in DOM.

The following global field is exposed on the jQuery extension point:

  • $.fn.rowMerge.selector - the selector string used to automatically target and apply the plugin. default = "table.row-merge"