Merge Adjacent Rows With Same Data - jQuery row-merge

Just another jQuery plugin to merge table cells with the same data (and with colspan attribute) in adjacent rows. It also provides a matcher function that allows you to merge table rows based on a custom function.

See Also:

• Merge Cells With The Same Value In HTML Table - table.marge
• Merge Adjacent Cells In An HTML Table - jQuery Table-Merger.js

How to use it:

1. Load the row-merge JavaScript library after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/row-merge-bundle.min.js"></script>

2. Just call the function rowMerge() on your HTML table and the plugin will do the rest.

<table id="table-example" class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>Month</th>
      <th>Week</th>
      <th>Day</th>
      <th>Color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>March</td>
      <td>1</td>
      <td>Monday</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>March</td>
      <td>1</td>
      <td>Tuesday</td>
      <td>Green</td>
    </tr>
    <tr>
      <td>March</td>
      <td>1</td>
      <td>Wednesday</td>
      <td>Blue</td>
    </tr>
    <tr>
      <td>March</td>
      <td>1</td>
      <td>Thursday</td>
      <td>Blue</td>
    </tr>
    <tr>
      <td>March</td>
      <td colspan="2">1</td>
      <!-- <td>Friday</td> -->
      <td>Yellow</td>
    </tr>
    <tr>
      <td>March</td>
      <td>2</td>
      <td>Monday</td>
      <td>Yellow</td>
    </tr>
    <tr>
      <td>March</td>
      <td>2</td>
      <td colspan="2">Tuesday</td>
    </tr>
    <tr>
      <td>March</td>
      <td>2</td>
      <td>Wednesday</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>March</td>
      <td>2</td>
      <td>Thursday</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>March</td>
      <td>2</td>
      <td>Friday</td>
      <td>Blue</td>
    </tr>
  </tbody>
</table>

$(function(){
  var table = $('#table-example').rowMerge();
});

3. Merge and unmerge the table manually.

table.merge();
table.unmerge();

4. Sometimes you might need to exclude certain columns to be merged:

var table = $('#table-example').rowMerge({
    excludedColumns: [1, 2, 3],
    zeroIndexed: false // or true
});

5. Merge table cells using a custom function.

var table = $('#table-example').rowMerge({
    matcher: function(HTMLTableCellElement, HTMLTableCellElement) {
      // ...
    }
});

Changelog:

v1.1.0 (2021-03-11)

• Append the class row-merge to table elements and have the plugin be applied automatically.
• Or define your own selector in $.fn.rowMerge.selector.

---

This awesome jQuery plugin is developed by andreww1011. For more Advanced Usages, please check the demo page or visit the official website.