Syf AK Ответов: 1

Как разделить ячейки таблицы.


Я создал HTML-таблицу.
Выбор тд путем перетаскивания.
Слияние тд, выделенных цветом в каждом тр.

До слияния ячеек я все делал успешно. Теперь я застрял в расщеплении(unmerge) этих слияний td. Может ли кто-нибудь дать мне идею, как я могу разделить объединенные ячейки при нажатии кнопки splitcells(button) с помощью Javascript или jquery.

Спасибо.

Что я уже пробовал:

<table cellspacing="0" cellpadding="0" border="0">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </table>
    <input id="btMerge" type="button" value="Merge cells" />
    <input id="btSplit" type="button" value="Split cells" />

CSS:
     table {
             width: 80%;
            }
            
            table td {
                border: 1px solid #97B4D1;
                text-align: center;
                cursor: pointer;
            }


JavaScript:
    var StartTD = null;
    var StartIndex = null;
    var EndTD = null;
    var EndIndex = null;
    $().ready(function() {
        $("td").unbind("mousedown").bind("mousedown", function() {
            $("table td").css("background-color", "");
            StartTD = $(this);
            var y = $(this).index();
            var x = $(this).parent().index();
            StartIndex = {
                x: x,
                y: y
            };
        });
        $("td").unbind("mouseup").bind("mouseup", function() {
            EndTD = $(this);
            var y = $(this).index();
            var x = $(this).parent().index();
            EndIndex = {
                x: x,
                y: y
            };
            SelectTD(StartIndex, EndIndex, "green");
        });
        $("#btMerge").click(function() {
            MergeCell(StartIndex, EndIndex);
            MergeCell(EndIndex, StartIndex);
        });
    });

    function SelectTD(StartIndex, EndIndex, Color) {
        var MinX = null;
        var MaxX = null;
        var MinY = null;
        var MaxY = null;
        if (StartIndex.x < EndIndex.x) {
            MinX = StartIndex.x;
            MaxX = EndIndex.x;

        } else {
            MinX = EndIndex.x;
            MaxX = StartIndex.x;
        };
        if (StartIndex.y < EndIndex.y) {
            MinY = StartIndex.y;
            MaxY = EndIndex.y;
        } else {
            MinY = EndIndex.y;
            MaxY = StartIndex.y;
        };
        StartIndex = {
            x: MinX,
            y: MinY
        };
        EndIndex = {
            x: MaxX,
            y: MaxY
        };
        for (var i = MinX; i <= MaxX; i++) {
            for (var j = MinY; j <= MaxY; j++) {
                var SelectTR = $("table tr").eq(i);
                $("td", SelectTR).eq(j).css("background-color", Color);
            }
        }
    }

    function MergeCell(StartIndex, EndIndex) {
        var Colspan = null;
        var Rowspan = null;
        console.log(StartIndex, EndIndex)
        Rowspan = EndIndex.x - StartIndex.x + 1;
        Colspan = EndIndex.y - StartIndex.y + 1;
        var IndexTR = $("table tr").eq(StartIndex.x);
        $("td", IndexTR).eq(StartIndex.y).attr("colspan", Colspan).attr("rowspan", 
Rowspan);

        for (var i = StartIndex.x; i <= EndIndex.x; i++) {
            for (var j = StartIndex.y; j <= EndIndex.y; j++) {
                if (i == StartIndex.x && j == StartIndex.y) continue;
                var SelectTR = $("table tr").eq(i);
                $("td", SelectTR).eq(j).hide();
            }
        }

    }

1 Ответов

Рейтинг:
7

littleGreenDude

Добавить функцию для разделения ячеек:

function SplitCell(StartIndex){
    // get our starting row index
    var i = StartIndex.x;
    // select the first row to process
    var SelectTR = $("table tr").eq(i);
    while (SelectTR.length > 0) {
        // get our starting column index
        var j = StartIndex.y;
        // select first cell to process
        var target = $("td", SelectTR).eq(j);
        // while we have a valid cell
        while(target.length > 0){
            // reset our spans
            target.attr("colspan", 1).attr("rowspan", 1);
            // reset the none, so cell will display
            if(target.css('display') == 'none') {
                target.css("display","");
            }
            // step to the next sibling td cell
            j = j+1;
            target = $("td", SelectTR).eq(j);
        }
        // step to the next table row
        i = i+1;
        SelectTR = $("table tr").eq(i);
    }
}


И добавьте кнопку вызова новой функции в готовом виде:

$("#btSplit").click(function() {
    SplitCell(StartIndex);
});


Syf AK

Он полностью работает нормально, но он разбивает все объединенные ячейки сразу. Например, если я объединю ячейки column1 и column4 одновременно и применю функцию разделения на column1, то она разделит обе ячейки столбца.