Merge and split table cells with JavaScript

REDIPS.table is small JavaScript library which enables interactive 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. Click on image below to see live demo and try to mark cells with button click and then click on Merge or Split in toolbox.

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.cellIndex(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 see REDIPS.table documentation where are listed all methods with input parameters.

43 thoughts on “Merge and split table cells with JavaScript”

  1. @rafal – REDIPS.table doesn’t have an option to return dynamically changed HTML table to origin state. The easiest way would be to create custom JS method to replace modified rows. In simple loop rows with merged TDs can be removed and in next loop just insert rows with regular number of cells. I hope this will do the trick ;)

  2. Hi Dbunic, all your codes are very helpful. I’m developing a project with dinamically tables (created with Jquery). I was wondering if it is possible to use REDIPS.table with that kind of tables?

    Merge/split cells is practically the last thing i need for my control to work for tables in my project … thanks a lot and great job !!!

  3. @Jose – REDIPS.table lib is written inside its own namespace so it can be combined with other JS frameworks (like jQuery). Any type of HTML table can be used – static (created with page loading) or dynamic. Tar.gz package contains lib source code and all examples prepared as start point for similar cases …

    I hope you have successfully finished your project.
    Cheers!

  7. dbunic, do you have an example of the delete / add col and rows hooked up to the drag and drop

  9. Hi Dbunic, all your codes are very helpful.
    I have an example:
    +I want to click on cell and add text into cell. When finish this progess text will be display in cell that I clicked before.
    +I want to save all table to datable ( include content and table) and when page load I render data save.

    How can I do it.
    Thanks.

  11. Hi dbunic, Can you provide this posted examples source as it is as i would be very interested to start a project from it. (Shh…It’s Bus Management for Colleges)

  12. Is it possible to do merge function buy dragging boarder of one cell over another and on drop it merges?

  13. Hi DBunic,

    Your codes are really amazing! Do you also have a sample where The fields automatically merges without clicking the merge button as well as automatic splitting by let’s say double-clicking the merged cells? Thank you very much and keep it up :)

  14. HI DBunic,

    I already found a way to automatically merge. Now I want to merge cells based on the value of each button. Say red has a value of 3 then 3 cells should merge automatically without clicking/ marking them.

    Thanks :)

  16. Dear Sir

    Please let me know how to pass the index value to the insert row/column function?

    Thanks
    Raja

  17. Hi,
    I am creating a dynamic table(based on user inputs). I have successfully merging the cells. Now i am trying to split the table cells. Can anyone provide the some custom javascript or jquery to split cells.

    Thanks.

  18. Hi,
    I am working on a dynamic table(generating based on user inputs). I have successfully merging the cells. I just got stuck in splitting the cells. Can someone provide the custom Javascript or jquery code to split the table cells.

    Thanks,
    Regards.

  19. Hi DBunic,

    We don’t know each other but I just wanted to take the time to say THANK YOU for providing such generous/capable JS libraries. Please advise if you have any donation links where we could help support your efforts or simply express our gratitude! Thank you again for being so kind!

  20. Hi Paul

    Firstly I wrote libraries for my needs and later I decided to make them publish (and I think this was a good decision). In the past few months because of my job is not left much time but I’m still trying to help and apply changes to the code. Anyway, I’m glad that JS libs are useful for you and if you want to support my work, please see “Support this site” link on the main bar.

    Thank you

Leave a Comment