<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

<!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 id="Head1" 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 # 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 () {

            var createTabl = function () {

                $("table tbody tr").remove();

                var j = ;

                while (j < ) {

                    var i = ;

                    var tr = $("<tr></tr>");

                    tr.attr("y", j);

                    while (i < ) {

                        var td = $("<td>" + j + "." + i + "</td>");

                        td.attr({ x: i, y: j });

                        td.click(function (event) { clickTd(event); });

                        tr.append(td);

                        i++;

                    }

                    $("table").append(tr);

                    j++;

                };

            };

            createTabl();

            var clickTd = function (event) {

                var obj = event.srcElement ? event.srcElement : event.target;

                $(obj).toggleClass("select");

                if (event.ctrlKey == ) {

                    var rangetd = rangeTD();

                    $("table").find("td").each(function () {

                        $(this).removeClass("select");

                        var x = parseInt($(this).attr("x"));

                        var y = parseInt($(this).attr("y"));

                        if (x >= rangetd.x && x <= (rangetd.x + rangetd.xCount - ) && y >= rangetd.y && y <= (rangetd.y + rangetd.yCount - )) {

                            $(this).addClass("select");

                        }

                    });

                }

            };

            $("#create").click(function () { createTabl() });

            var getMax = function (values) {

                var temp = ;

                for (var i = ; i < values.length; i++) {

                    if (i == ) {

                        temp = values[i];

                    } else {

                        if (values[i] > temp) {

                            temp = values[i];

                        }

                    }

                }

                return temp;

            }

            var getMin = function (values) {

                var temp = ;

                for (var i = ; i < values.length; i++) {

                    if (i == ) {

                        temp = values[i];

                    } else {

                        if (values[i] < temp) {

                            temp = values[i];

                        }

                    }

                }

                return temp;

            }

            $("#split").click(function () {

                //补齐合并的列

                $(".select[colspan]").each(function () {

                    var x = parseInt($(this).attr("x")) + ;

                    var y = parseInt($(this).attr("y"));

                    var colspan = parseInt($(this).attr("colspan"));

                    var td = $(this);

                    while (colspan > ) {

                        var newTd = getTd(x, y);

                        td.after(newTd);

                        td = newTd;

                        colspan--;

                        x++;

                    }

                });

                //补齐合并的行

                $(".select[rowspan]").each(function () {

                    var colspan = ;

                    if ($(this).attr("colspan") != undefined) {

                        colspan = parseInt($(this).attr("colspan"));

                    }

                    var y = parseInt($(this).attr("y")) + ;

                    var rowspan = parseInt($(this).attr("rowspan"));

                    while (rowspan > ) {

                        var x = parseInt($(this).attr("x"));

                        var tr = $("table tr td[y='" + y + "']:first").parent();

                        var td;

                        tr.find("td").each(function (i, o) {

                            var nextX = parseInt($(this).attr("x"));

                            if (nextX < x) {

                                td = $(this);

                            }

                        });

                        var temp_colspan = colspan;

                        while (temp_colspan > ) {

                            var newTd = getTd(x, y);

                            td.after(newTd);

                            td = newTd;

                            x++;

                            temp_colspan--;

                        }

                        rowspan--;

                        y++;

                    }

                });

                $(".select[rowspan]").removeAttr("rowspan");

                $(".select[colspan]").removeAttr("colspan");

                $(".select").removeClass("select");

            });

            var getTd = function (x, y) {

                var td = $("<td>" + y + "." + x + "</td>");

                td.attr({ x: x, y: y });

                td.click(function (event) { clickTd(event); });

                return td;

            }

            $("#merge").click(function () {

                if (canMeger()) {

                    var range_td = rangeTD();

                    if (range_td.xCount > ) {

                        $(".select:first").attr("colspan", range_td.xCount);

                    }

                    if (range_td.yCount > ) {

                        $(".select:first").attr("rowspan", range_td.yCount);

                    }

                    $(".select:gt(0)").remove();

                    $(".select").removeClass("select");

                } else {

                    alert("不能合并");

                }

            });

            var rangeTD = function () {

                var xValues = [];

                var yValues = [];

                $(".select").each(function () {

                    xValues.push(parseInt($(this).attr("x")));

                    yValues.push(parseInt($(this).attr("y")));

                });

                var maxX = getMax(xValues);

                var maxY = getMax(yValues);

                var minX = getMin(xValues);

                var minY = getMin(yValues);

                return { x: minX, y: minY, xCount: maxX - minX + , yCount: maxY - minY +  };

            };

            var canMeger = function () {

                var range_td = rangeTD();

                var selectCount = ;

                $(".select").each(function () {

                    var rowspan = ;

                    var colspan = ;

                    if ($(this).attr("rowspan") != undefined) {

                        rowspan = parseInt($(this).attr("rowspan"));

                    }

                    if ($(this).attr("colspan") != undefined) {

                        colspan = parseInt($(this).attr("colspan"));

                    }

                    selectCount += (rowspan * colspan);

                });

                return selectCount == (range_td.xCount * range_td.yCount);

            }

            $(".align").click(function () {

                var textAlign = $(this).attr("gh-align");

                $(".select").css("text-align", textAlign);

                $(".select").removeClass("select");

            });

            $("#insertRow").click(function () {

                var tr = $(".select").parent();

                tr.find(".select").removeClass("select");

                var trCopy = tr.clone(true);

                trCopy.find("td[rowspan]").removeAttr("rowspan");

                trCopy.find("td[colspan]").each(function () {

                    var x = parseInt($(this).attr("x"));

                    var y = parseInt($(this).attr("y"));

                    var colspan = parseInt($(this).attr("colspan"));

                    var td = $(this);

                    while (colspan > ) {

                        td.after(getTd(x + , y));

                        td = td.next();

                        colspan--;

                    }

                });

                var trIndex = parseInt(tr.find("td:first").attr("y"));

                tr.prevAll().find("td[rowspan]").each(function () {

                    var rowspan = parseInt($(this).attr("rowspan"));

                    var tdY = parseInt($(this).attr("y")) + rowspan - ;

                    if (tdY >= trIndex) {

                        $(this).attr("rowspan", rowspan + );

                    }

                });

                trCopy.find("td[colspan]").removeAttr("colspan");

                trCopy.find("td").empty();

                trCopy.find("td").append("&nbsp;");

                tr.before(trCopy);

                trCopy.nextAll().find("td").each(function () {

                    var y = parseInt($(this).attr("y")) + ;

                    $(this).attr("y", y);

                });

            });

            $("#delRow").click(function () {

                var tr = $(".select").parent();

                //删除合并行的第一行

                tr.find("td[rowspan]").each(function () {

                    var tdCopy = $(this).clone(true);

                    var rowspan = parseInt($(this).attr("rowspan"));

                    if ((rowspan - ) == ) {

                        tdCopy.removeAttr("rowspan");

                    } else {

                        tdCopy.attr("rowspan", rowspan - );

                    }

                    tdCopy.attr("y", parseInt($(this).attr("y")) + );

                    var delX = parseInt($(this).attr("x"));

                    var td = null;

                    tr.next().find("td").each(function () {

                        var x = parseInt($(this).attr("x"));

                        if (x < delX) {

                            td = $(this);

                        }

                    });

                    if (td == null) {

                        tr.prepend(tdCopy);

                    } else {

                        td.after(tdCopy);

                    }

                });

                var trIndex = parseInt(tr.find("td:first").attr("y"));

                tr.prevAll().find("td[rowspan]").each(function () {

                    var rowspan = parseInt($(this).attr("rowspan"));

                    var tdY = parseInt($(this).attr("y")) + rowspan - ;

                    if (tdY >= trIndex) {

                        if ((rowspan - ) == ) {

                            $(this).removeAttr("rowspan");

                        } else {

                            $(this).attr("rowspan", rowspan - );

                        }

                    }

                });

                tr.nextAll().find("td").each(function () {

                    var y = parseInt($(this).attr("y")) - ;

                    $(this).attr("y", y);

                });

                tr.remove();

            });

            $("#insertCol").click(function () {

                var x = parseInt($(".select").attr("x"));

                $("table tbody tr").each(function () {

                    var td = $(this).find("td[x='" + x + "']");

                    if (td.size() > ) {

                        var newTd = getTd(x, td.attr("y"));

                        td.before(newTd);

                        td = newTd;

                    } else {

                        $(this).find("td").each(function () {

                            var tdX = parseInt($(this).attr("x"));

                            if (tdX < x) {

                                td = $(this);

                            }

                        });

                        td.attr("colspan", parseInt(td.attr("colspan")) + );

                    }

                    td.nextAll().each(function () {

                        $(this).attr("x", parseInt($(this).attr("x")) + );

                    });

                });

            });

            $("#delCol").click(function () {

                var x = parseInt($(".select").attr("x"));

                $("table tbody tr").each(function () {

                    var td = $(this).find("td[x='" + x + "']");

                    if (td.size() > ) {

                        td.nextAll().each(function () {

                            $(this).attr("x", parseInt($(this).attr("x")) - );

                        });

                        if (td.attr("colspan") == undefined) {

                            td.remove();

                        } else {

                            var colspan = parseInt(td.attr("colspan")) - ;

                            if (colspan == ) {

                                td.removeAttr("colspan");

                            } else {

                                td.attr("colspan", colspan);

                            }

                        }

                    } else {

                        $(this).find("td").each(function () {

                            var tdX = parseInt($(this).attr("x"));

                            if (tdX < x) {

                                td = $(this);

                            }

                        });

                        if (td.attr("colspan") != undefined) {

                            var colspan = parseInt(td.attr("colspan")) - ;

                            if (colspan == ) {

                                td.removeAttr("colspan");

                            } else {

                                td.attr("colspan", colspan);

                            }

                        }

                        td.nextAll().each(function () {

                            $(this).attr("x", parseInt($(this).attr("x")) - );

                        });

                    }

                });

            });

            $("table").on("mousedown", function () {

                if (window.event.button == ) {

                    $(this).find(".select").removeClass("select");

                }

            });

$("table").on("contextmenu", function () {
return false;
});

            $("#test").on("click", function () {

                $("table td").each(function () {

                    $(this).empty();

                    $(this).append($(this).attr("y") + "." + $(this).attr("x"));

                });

            });

        });

    </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="插入行" id="insertRow" />

            <input type="button" value="删除行" id="delRow" />

            <input type="button" value="插入列" id="insertCol" />

            <input type="button" value="删除列" id="delCol" />

            <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" />

            <input type="button" value="验证" id="test" />

        </div>

        <div class="body">

            <table border="" style="width: 100%;">

            </table>

        </div>

    </div>

    </form>

</body>

</html>

程序员的基础教程：菜鸟程序员

最新文章

  1. 【Python五篇慢慢弹（5）】类的继承案例解析，python相关知识延伸
  2. Android Material Design 兼容库的使用
  3. java 下载Excel模板
  4. lua 快速排序
  5. Delphi中如何控制其他程序窗体上的窗口控件
  6. ajax详解，以及异步JSOP的实现
  7. Oracle Linux 6.3下安装Oracle 11g R2(11.2.0.3)
  8. Windows不能在本地计算机启动OracleDBConsoleorcl .错误代码2
  9. Could not find qmake configuration file win32-g++
  10. openGL研究钞四 ： 关于颜色， 尺寸， 虚线， 多边形逆转， 空洞， 使用位图
  11. PariticalFilter在MFC上的运行，源代码公开
  12. 个人作业3——（Alpha阶段）
  13. 【2017集美大学1412软工实践_助教博客】团队作业9——测试与发布（Beta版本）
  14. 关于React Native项目在android上UI性能调试实践
  15. Google瓦片地图URL
  16. Set接口HashSet实现类
  17. c# 以换行(\r\n)拆分字符串
  18. Java 基础 引用数据类型 ArrayList集合
  19. [leetcode]Sqrt(x) @ Python
  20. Java设计模式（2）单态模式（Singleton模式）

热门文章

  1. hibernate的list和iterate的区别
  2. 重温CLR（六）方法和参数
  3. FastAdmin 后台 UserRule 勾选不完整 Bug 修复
  4. 搭建JIRA汉化后乱码问题
  5. strtotime出现时区问题不一致的解决方法
  6. laravel前后端分离的用户登陆 退出 中间件的接口与session的使用
  7. 字符编码py2,py3操作，SecureCRT的会话编码的设置
  8. Redis存储AccessToken
  9. 用python编写简单爬虫
  10. PL/SQL 训练12--动态sql和绑定变量