js 操作table

<%@ 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>

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

js 操作table的更多相关文章

第十三篇 JS 操作table表格
JS 操作table表格这节课难度可能高一点,因为没有提前解释if判断.for循环.这节课是直接把这两样用上了,老师先简单介绍一下: if,判断语句,判断就很简单了嘛,假如说1=1(1等于1),当然 ...
js操作table倒叙显示序号的问题
今天遇到一奇葩问题,就是在js添加table时,序号是倒叙显示的,而且数据库查出来时正序的,为什么显示是倒叙的呢? 我百度一番,终于有了结果: var newRow=table.insertRow(- ...
js 操作table: insertRow()，deleteRow()，insertCell()，deleteCell()方法
表格有几行: var trCnt = table.rows.length; (table为Id ) 每行有几列:for (var i=0; i<trCnt; i++) ...
js操作table表格导出数据到excel方法
js导出excel资料很少,网上也找了很多,基本都不能用,要么只能是IE用,还必须要权限,这是非常不好的.后来到github上找到table2excel.js,虽然可以用,但仍然对IE支持不够,也算不 ...
js操作table
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
原生JS操作 table object HTMLTableSectionElement 对象,获取行数
<tbody id="infoTab"> <tr class="fomat"> <td class="blank&quo ...
js操作table中tr的顺序，实现上移下移一行的效果
总体思路是在table外部加个div,修改div的innerHtml实现改变tr顺序的效果具体思路是获取当前要移动tr行的rowIndex,在table中删除掉,然后循环table的rows,到了 ...
js操作表格
js 操作table: insertRow(),deleteRow(),insertCell(),deleteCell()方法表格有几行: var trCnt = table.rows.length ...
js实现动态操作table
本章案例为通过js,动态操作table,实现在单页面进行增删改查的操作. 简要案例如下: <%@ page language="java" contentType=&quo ...

随机推荐

rebar自定义template
在开发过程中rebar自带模板建立项目,或多或少不能满足自己的开发需求.本人又是那种懒人,所以就要想办法偷懒.查看了priv模板打造适合自己的项目模板.下面我简单的介绍整个模板的打造过程. 准备过程 ...
LOJ10042 收集雪花
题意不同的雪花往往有不同的形状.在北方的同学想将雪花收集起来,作为礼物送给在南方的同学们.一共有 n 个时刻,给出每个时刻下落雪花的形状,用不同的整数表示不同的形状.在收集的过程中,同学们不希望有重 ...
maven编译问题：maven编译成功，eclipse文件未编译
我们先来看一个正常的编译流程: 1.从svn上检出一个项目: 2.看该工程是否为maven项目,不是则先转为maven项目:右键单击项目,选择configure->Convert to Mave ...
erlang配置三方库
暴力的: 直接下载解压以后放到erlang的lib目录,比如/usr/local/Cellar/erlang/17.3/lib/erlang/lib 和谐的: 在用户名下建立.erlang文件在里面 ...
【转】JMeter入门
一.JMeter概述 JMeter就是一个测试工具,相比于LoadRunner等测试工具,此工具免费,且比较好用,但是前提当然是安装Java环境: JMeter可以做 (1)压力测试及性能测试: (2 ...
java从键盘输入一组数据，输出其最大值，平均值，最小值没法输出
总结::需要耐心,加思考.做事不思考,那就是白做徒劳!!!!! package com.aini; import java.util.Scanner; //操...为什么数组的大小比较我硬是搞不懂,比 ...
PHP base64多图片上传
// 多图片上传,base64 public function upload_multi() { $pic = $_POST['pic']; if (!$pic) { $this->json-& ...
git的分布式和集中式
当然,Git的优势不单是不必联网这么简单,后面我们还会看到Git极其强大的分支管理,把SVN等远远抛在了后面.
第三章深入分析Java Web中的中文编码问题
3.1 几种常见的编码格式 3.1.1 为什么要编码一个字节 byte只能表示0~255个符号,要表示更多的字符,需要编码. 3.1.2 如何翻译 ASCII码:有128个,用一个字节的低7位表示. ...
我是怎么用python模仿勒索软件加密文件的（病毒）
前言: 今天下午上学,用python写个勒索脚本然后打包成exe是个不错的选择我们来搞事情吧.看那学校我就不想上学. 0x01:要用到的模块,各位请自行准备 import win32api,win3 ...

js 操作table

js 操作table的更多相关文章

随机推荐

热门专题