jquery – 动态地在表上添加colspan和rowspan

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

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

colspan(合并)

我尝试做类似的事情

红色显示我要合并的内容,因此最终输出应该是所有六个单元格合并为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 );

    };

原文链接：https://www.f2er.com/jquery/428051.html

jquery – 动态地在表上添加colspan和rowspan

猜你在找的jQuery相关文章