动态地在桌面上添加colspan和rowspan

Question

我想在表数据上添加colspan或rowspan

情况就像我有一个说5x5的表，我想通过选择说2列来合并列，通过用鼠标选择它们并想要合并。这很容易，我可以做到这一点，但问题出现时

黄色显示colspan（合并）

我尝试做类似

的事情

红色显示我要合并的内容，因此最终输出应该是所有六个单元格合并为1，并且还有许多其他类型的情况可以看到。 所以请指导我继续前进的方法。

Answer 1

你可以这样做，也许不是最优雅但它有效，我希望它适合你：

首先使用属性准备表。

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++;
        })
    }

然后你可以调用这个函数发送选定的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);
    }

还添加下一个实用程序功能：

$.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

今天我编写了一个函数来自动为所选列设置单元格行数

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);
      }
 });

}

我的功能有一个例子：http://jsfiddle.net/6L25e/