如何拆分表格单元格。

问题描述

我创建了一个HTML表格。

通过拖动来选择td。

合并每个tr中用颜色突出显示的td。



在合并细胞之前我已经成功完成了。现在我陷入了拆分（取消合并）那些合并td的问题。有人可以告诉我如何使用Javascript或jquery在单击splitcells（按钮）时拆分合并的单元格。



谢谢。



我尝试了什么：

I have created an HTML table.
Selecting the td's by draging.
Mergeing td's who has highlighted by color in each tr.

Until merging cells I have done successfully. Now I'm stuck in splitting(unmerge) those merge td's. Can someone give me a idea how can I split the merged cells on clicking splitcells(button) using Javascript or jquery.

Thanks.

What I have tried:

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

    }

推荐答案

这篇关于如何拆分表格单元格。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！