Merge Adjacent Rows With Same Data - jQuery row-merge
File Size: | 49.2 KB |
---|---|
Views Total: | 2570 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.