Tuesday, June 25, 2024
HomejQueryAuto Merge Similar Adjoining Cells In Desk - jQuery addTableRowSpan

Auto Merge Similar Adjoining Cells In Desk – jQuery addTableRowSpan


addTableRowSpan is a light-weight and quick jQuery plugin that robotically merges adjoining cells with the identical worth in an HTML desk. This may help take away pointless repetition and make knowledge interpretation extra intuitive for the person.

The plugin has a number of configuration choices to regulate its conduct, like specifying which columns to use the spanning to, whether or not to merge empty cells up or down, and which forms of cells (TH or TD) to focus on. 

Easy methods to use it:

1. Obtain and cargo the jquery-addtablerowspan.js script after jQuery library (slim construct is really helpful).


<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery-addtablerowspan.js"></script>

2. Simply name the perform addTableRowSpan in your HTML desk and the plugin will do the remainder.


<desk>
  ...
</desk>

$("desk").addTableRowSpan({
  // ...
});

3. Set the vertical alignment. Default: ‘high’.


$("desk").addTableRowSpan({
  vertical_align:'center',
});

4. Specify precisely which columns ought to have their an identical cells merged. Default: [].


$("desk").addTableRowSpan({
  columns: [0, 1, 2],
});

5. Pair empty cells with higher or decrease cells. Default: false.


$("desk").addTableRowSpan({
  emptyCellsPairWithUppers: false,
  emptyCellsPairWithLowers: false,
});

6. Decide from which row the plugin ought to begin its magic. Default: 0 (desk header).


$("desk").addTableRowSpan({
  firstRow: 1,
});

7. Decide which forms of cells (TH or TD) to focus on. Default: [“th”, “td”].


$("desk").addTableRowSpan({
  cellTypes: ["td"]
});

This superior jQuery plugin is developed by marikv. For extra Superior Usages, please verify the demo web page or go to the official web site.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments