Добавить 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/