Merge and split table cells with JavaScript

REDIPS.table is a small JavaScript library which enables interactively or through script merging and splitting table cells. REDIPS.table.onmousedown() public method will activate onmousedown event listeners on TD elements to enable mark cells with mouse button. Additional feature is appending / deleting table rows / cells. Try to mark cells with button click and then click on Merge or Split in toolbox.

0-0	0-1	0-2	0-3	0-4	0-5	0-6
1-0	1-1	1-2		1-4	1-5	1-6
2-0	2-1	2-2	2-3	2-4	2-5	2-6
3-0	3-1	3-2	3-3	3-4	3-5	3-6
4-0	4-1	4-2	4-3	4-4	4-5	4-6

REDIPS.table should be initialized. In demo mode, lib will show cell index in every table cell so it's easier to see index changes after cell is merged or splitted.

// REDIPS.table initialization

redips.init = function () {

    // define reference to the REDIPS.table object

    var rt = REDIPS.table;

    // activate onmousedown event listener on cells within table with id="mainTable"

    rt.onmousedown('mainTable', true);

    // show cellIndex (it is nice for debugging)

    rt.cell_index(true);

    // define background color for marked cell

    rt.color.cell = '#9BB3DA';

};

Here is JS code executed on button click in toolbox above main table. To merge table cells, cells should be marked in a sequence (horizontally or vertically). On the other hand, cell can be split if colspan or rowspan value is greater then 1.

// function merges table cells

redips.merge = function () {

    // first merge cells horizontally and leave cells marked

    REDIPS.table.merge('h', false);

    // then merge cells vertically and clear cells (second param is true by default)

    REDIPS.table.merge('v');

};

// function splits table cells if colspan/rowspan is greater then 1

// mode is 'h' or 'v' (cells should be marked before)

redips.split = function (mode) {

    REDIPS.table.split(mode);

};

// insert/delete table row

redips.row = function (type) {

    REDIPS.table.row('mainTable', type);

};

// insert/delete table column

redips.column = function (type) {

    REDIPS.table.column('mainTable', type);

};

Features like adding / deleting table rows and columns in REDIPS.table library are developed from JavaScript functions published in my previous post Adding table rows and columns in JavaScript. There you can see simple functions for adding and deleting table rows / columns but without colspan / rowspan functionality.

redips12.tar.gz package contains source code, minimized library version redips-table-min.js and several examples including this already shown on page. Further, you can read REDIPS.table documentation where are listed all methods with input parameters.

This entry was posted on May 7, 2012 and is filed under JavaScript