Add colspan and rowspan on table on the fly

Question

I want to add colspan or rowspan on a table data

The situation is like I have a table of say 5x5, I want to merge columns by selecting say 2 columns by selecting them with mouse and want to merge. This is easy and I'm able to do till this but issue comes when

yellow shows colspan(merged)

and I try to do something like

Red shows what I want to merge so the final output should be all six cells merged into 1 and there are many other case of this type which can be seen. So please guide me the way to proceed for the same.

Answer 1

You can do it like this, perhaps not the most elegant but it works, i hope it works for you:

first prepare the table with attributes.

function prepare()
    {
        var row = 0;
        $('table tr').each(function ()
        {
            var tr = $(this);
            var curCol = 0;
            var caught = $(this).data('caught');
            $('td', this).each(function (index)
            {
                while (caught && caught[curCol])
                    curCol++;

                var colspan = $(this).attr('colspan') || 1;
                var rowspan = $(this).attr('rowspan');

                $(this).attr('start', curCol);
                $(this).attr('end', curCol + colspan - 1);
                $(this).attr('startrow', row);
                $(this).attr('endrow', row + rowspan - 1);



                var next_tr = tr.next();
                for (var i = 0; i < rowspan - 1; i++)
                {
                    var curCaught = next_tr.data('caught') || [];
                    for (var j = curCol; j < curCol + colspan; j++)
                        curCaught[j] = true;
                    next_tr.data('caught', curCaught);
                    next_tr = next_tr.next();
                }

                curCol += colspan;
            });
            row++;
        })
    }

then you can call this function sending it the selected tdies:

function getBoundingRectangle(tds)
    {
        var minCol = tds.min(function(){return $(this).attr('start');});
        var maxCol = tds.max(function(){return $(this).attr('end');});

        var minrow = tds.min(function(){return $(this).attr('startrow');});
        var maxrow = tds.max(function(){return $(this).attr('endrow');});

        var rec = $('td').filter(function()
        {
            var startRow = $(this).attr('startrow');
            var startCol = $(this).attr('start');

            var endRow = $(this).attr('endrow');
            var endCol = $(this).attr('end');

        return (startRow >= minrow && startRow <= maxrow && startCol >= minCol && startCol <= maxCol) ||
               (endRow >= minrow && endRow <= maxrow && endCol >= minCol && endCol <= maxCol);
        });

        if (rec.length == tds.length)
        {
            debugger;
            var first = rec.filter('[start=' + minCol + '][startrow=' + minrow + ']')
            rec.not(first).remove();
            first.attr('colspan', maxCol - minCol + 1);
            first.attr('rowspan', maxrow - minrow + 1);

            return rec;
        }
        else return getBoundingRectangle(rec);
    }

also add the next utility functions:

$.fn.max = function(func)
    {
        var arr = this.map(func).toArray();

        return Math.max.apply( Math, arr );

    };

    $.fn.min = function(func)
    {
        var arr = this.map(func).toArray();

        return Math.min.apply( Math, arr );

    };

Answer 2

Today i wrote function to automatically cell rowspan for selected columns

function rowspan(tableClass, rowClass) {

 var cellThis, cellPrev, spanning;

 $("." + tableClass + " ." + rowClass).each(function () {
      cellThis = $(this);
      spanning = 0;

      if (cellPrev) {
           if ($(cellPrev).html() == $(cellThis).html()) {
                $(cellThis).remove();
                $(cellPrev).prop("rowspan", parseInt($(cellPrev).prop("rowspan")) + 1);
                spanning = 1;
           }
      }


      if (spanning == 0) {
           cellPrev = $(this);
      }
 });

}

There is an example of my function: http://jsfiddle.net/6L25e/