在桌上添加colspan和rowspan [英] Add colspan and rowspan on table on the fly

问题描述

我想在表格数据中添加colspan或rowspan

这种情况就像我有一张表格5x5，我想通过选择说2来合并列通过用鼠标选择它们并希望合并。这很容易，并能够做到这一点，但问题来了时

yellow显示colspan（合并）

并且我尝试做类似于

红色显示我想要合并，所以最终的输出应该是所有六个单元合并为1，并且还有许多其他可以看到的这种类型的情况。
所以请指导我继续进行下去的方式

解决方案

你可以这样做，也许不是最优雅的，但它的工作原理，我希望它适合你：

首先准备与属性的表。

 函数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&&catch; [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  curCaught [j] = true; 
 next_tr.data（'caught'，curCaught）; 
 next_tr = next_tr.next（）; 
} 
 
 curCol + = colspan; 
}）; 
 row ++; 
}）
} 
  

然后你可以调用这个函数把它选中tdies：
$ b $ pre $ 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）;

返回rec;
}
else return getBoundingRectangle（rec）;
}


还会添加下一个实用功能：

  $。fn.max = function（func）
 {
 var arr = this.map（func）.toArray（）; 
 
返回Math.max.apply（Math，arr）; 
 
}; 
 
 $ .fn.min = function（func）
 {
 var arr = this.map（func）.toArray（）; 
 
返回Math.min.apply（Math，arr）; 
 
}; 
  

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

解决方案

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

    };

这篇关于在桌上添加colspan和rowspan的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！