Press "Enter" to skip to content

Merge Identical Table Rows jQuery plugin | RowMerge

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

Easily merge matching table cells into adjacent rows:

  • Cells in adjacent rows with mirrored text and colspan are merged.
  • Provide your own matcher functionality to customize the behavior.
  • Ability to exclude rows in any column from the merge.

How to make use of 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 name the function rowMerge() in your HTML table and the plugin will do the remaining.

<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 may exclude sure columns to be merged.

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

5. Merge table cells utilizing a customized function.

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

Merge Adjacent Rows With Same Data, row-merge Plugin/Github

row-merge-demo


See Demo And Download

Official Website(andreww1011): Click Here

This superior jQuery/javascript plugin is developed by andreww1011. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *