码迷,mamicode.com
首页 > 其他好文 > 详细

table 合并行和列

时间:2015-05-28 09:22:17      阅读:302      评论:0      收藏:0      [点我收藏+]

标签:

table合并行列,以及拆分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .select
        {
            background-color: gray;
        }
        .left
        {
            text-align: left;
        }
        .center
        {
            text-align: center;
        }
        .right
        {
            text-align: right;
        }
        table
        {
            border-collapse: collapse;
            border: none;
        }
        td
        {
            border: solid #000 1px;
            border-color: Black;
            empty-cells: show;
        }
    </style>
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("table tbody tr td").click(function () {
                $(this).toggleClass("select");
            });

            var getColCount = function () {
                var colspan = 0;
                //获取选择的实际列数,包括合并的列
                $(".select:first").parent().find(".select").each(function () {
                    if ($(this).attr("colspan") == undefined) {
                        colspan++;
                    } else {
                        colspan += parseInt($(this).attr("colspan"));
                    }
                });
                return colspan;
            }
            var getRowCount = function () {
                var rowspan = 0;
                //获取选择的实际行数,包括合并的行
                var yIndex = $(".select:first").parent().index();
                $("table tbody tr").has(".select").each(function () {
                    if ($(this).index() >= yIndex) {
                        var tr_first_checkd_td = $(this).find(".select:first");
                        if (tr_first_checkd_td.attr("rowspan") == undefined) {
                            rowspan++;
                            yIndex++;
                        } else {
                            rowspan += parseInt(tr_first_checkd_td.attr("rowspan"));
                            yIndex += parseInt(tr_first_checkd_td.attr("rowspan"));
                        }
                    }
                });
                return rowspan;
            }
            $("#merge").click(function () {
                if (canMerge()) {
                    var colspan = getColCount();
                    var rowspan = getRowCount();
                    if (colspan != 1) {
                        $(".select:first").attr({ colspan: colspan });
                    }
                    if (rowspan != 1) {
                        $(".select:first").attr({ rowspan: rowspan });
                    }
                    $(".select:gt(0)").remove();
                    $(".select").removeClass("select");
                } else {
                    alert("不能合并");
                }
            });

            var canMerge1 = function () {
                var rowCount = getRowCount();
                var colCount = getColCount();
                var totalCount = 0;
                $(".select").each(function () {
                    var rowspan = 1;
                    var colspan = 1;
                    if ($(this).attr("rowspan") != undefined) {
                        rowspan = parseInt($(this).attr("rowspan"));
                    }
                    if ($(this).attr("colspan") != undefined) {
                        colspan = parseInt($(this).attr("colspan"));
                    }
                    totalCount += (rowspan * colspan);
                });

                return totalCount == rowCount * colCount;
            };

            var canMerge = function () {
                //判断是否能合并,
                //一,选择的td个数等于第一个和最后一个选择的td构成的方块的个数,
                //二,所有选择的td的x和y轴的index都在第一个最后一个选中的td的index范围内
                var first_X_Index = $(".select:first").index();
                var first_Y_Index = $(".select:first").parent().index();

                var last_X_Index = $(".select:last").index();
                var last_Y_index = $(".select:last").parent().index();
                var count = (last_X_Index - first_X_Index + 1) * (last_Y_index - first_Y_Index + 1);
                var selectCount = $(".select").size();
                //选择的td个数等于第一个和最后一个选择的td构成的方块的个数
                var countEQ = count == selectCount;
                //所有选择的td的x和y轴的index都在第一个最后一个选中的td的index范围内
                var inRange = true;
                for (var i = 0; i < $(".select").size(); i++) {
                    var x_index = $(".select").eq(i).index();
                    var y_index = $(".select").eq(i).parent().index();
                    if (x_index < first_X_Index || x_index > last_X_Index) {
                        inRange = false;
                        break;
                    } else if (y_index < first_Y_Index || y_index > last_Y_index) {
                        inRange = false;
                        break;
                    }
                }
                //return inRange && countEQ;
                return true;
            };

            var getMin = function (colIndexs) {
                var temp = 0;
                for (var i = 0; i < colIndexs.length; i++) {
                    if (i == 0) {
                        temp = colIndexs[i];
                    } else {
                        if (colIndexs[i] < temp) {
                            temp = colIndexs[i];
                        }
                    }
                }
            }

            $("#split").click(function () {
                //先补齐colspan,再补齐rowspan,最后删除选中的colspan和rowspan
                $("table tr .select[colspan]").each(function () {
                    var colspan = parseInt($(this).attr("colspan"));
                    while (colspan > 1) {
                        var td = $("<td></td>");
                        td.click(function () {
                            $(this).toggleClass("select");
                        });
                        $(this).after(td);
                        colspan--;
                    }
                });

                $("table tr .select[rowspan]").each(function () {
                    var index = $(this).index() - 1;
                    var trIndex = $(this).parent().index() + 1;
                    var rowspan = parseInt($(this).attr("rowspan"));
                    if ($(this).attr("colspan") == undefined) {
                        while (rowspan > 1) {
                            var td = $("<td></td>");
                            td.click(function () {
                                $(this).toggleClass("select");
                            });
                            $("table tr").eq(trIndex).find("td").eq(index).after(td);
                            rowspan--;
                            trIndex++;
                        }
                    } else {
                        var colspan = parseInt($(this).attr("colspan"));
                        while (rowspan > 1) {
                            while (colspan > 0) {
                                var td = $("<td></td>");
                                td.click(function () {
                                    $(this).toggleClass("select");
                                });
                                $("table tr").eq(trIndex).find("td").eq(index).after(td);
                                colspan--;
                            }
                            rowspan--;
                            trIndex++;
                        }
                    }
                });

                $(".select[rowspan]").removeAttr("rowspan");
                $(".select[colspan]").removeAttr("colspan");
                $(".select").removeClass("select");
            });

            $(".align").click(function () {
                var textAlign = $(this).attr("gh-align");
                $(".select").css("text-align", textAlign);
                $(".select").removeClass("select");
            });

            $("#create").click(function () {
                $("table tbody tr").remove();
                var j = 1;
                while (j < 20) {
                    var i = 1;
                    var tr = $("<tr></tr>");
                    while (i < 20) {

                        var td = $("<td>" + j + "." + i + "</td>");
                        td.click(function (event) {
                            if (event.ctrlKey == 1) {
                                alert("ctrl");
                            }
                            $(this).toggleClass("select");
                        });
                        tr.append(td);
                        i++;
                    }
                    $("table").append(tr);
                    j++;
                };
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="tool">
            <input type="button" value="新建" id="create" />
            <input type="button" value="合并" id="merge" />
            <input type="button" value="拆分" id="split" />
            <input type="button" value="左对齐" class="align" gh-align="left" />
            <input type="button" value="居中" class="align" gh-align="center" />
            <input type="button" value="右对齐" class="align" gh-align="right" />
        </div>
        <div class="body">
            <table border="1" style="width: 100%;">
                <tr>
                    <td>
                        1
                    </td>
                    <td>
                        2
                    </td>
                    <td>
                        3
                    </td>
                    <td>
                        4
                    </td>
                </tr>
                <tr>
                    <td>
                        5
                    </td>
                    <td>
                        6
                    </td>
                    <td>
                        7
                    </td>
                    <td>
                        8
                    </td>
                </tr>
                <tr>
                    <td>
                        9
                    </td>
                    <td>
                        10
                    </td>
                    <td>
                        11
                    </td>
                    <td>
                        12
                    </td>
                </tr>
                <tr>
                    <td>
                        13
                    </td>
                    <td>
                        14
                    </td>
                    <td>
                        15
                    </td>
                    <td>
                        16
                    </td>
                </tr>
            </table>
        </div>
    </div>
    </form>
</body>
</html>

 

table 合并行和列

标签:

原文地址:http://www.cnblogs.com/guohu/p/4535040.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!