文档章节

生成表格,合并、拆分单元格

喜喜呀
 喜喜呀
发布于 2017/09/01 11:44
字数 985
阅读 9
收藏 0

<script>

        // 显示已选单元格编号
        function ShowSelected() {
            var isEmpty = true;
            var tds = $("th,td", $("#t"));
            tds.filter(".ui-selected").each(function () {
                isEmpty = false;
            });
        }
        function mtSelectable() {

            // 使表格可选
            $("#t").selectable({
                stop: ShowSelected
            });
        }

        // 合并单元格按钮
        function mergeTable() {
            var $t = $("#t");

            if ($("table", $t).length > 0) {
                alert("不支持嵌套表格!");
                return;
            }
            var sigDel = "sign4delete"; // 删除标记,用作类名
            var sigSel = "ui-selected"; // 选中标记,用作类名
            // 补充单元格以便后继正确计算坐标
            $("th,td", $t).each(function () {
                // 坐标要实时计算,因会实时补充
                var ridx = $("tr", $t).index($(this).parent("tr"));
                var cidx = $(this).parent().children("th,td").index(this);
                var rowspan = Number($(this).attr("rowspan")) || 1;
                var colspan = Number($(this).attr("colspan")) || 1;
                var isSel = $(this).hasClass(sigSel);
                // 非选单元格拆出的单元格要加删除标记
                if (rowspan <= 1 && colspan <= 1)
                    return;
                // 跨格开插
                $("tr", $t).each(function () {
                    var idx = $("tr", $t).index(this);
                    var arr, $td = $("<td>").addClass(isSel ? sigSel : sigDel);
                    if (idx == ridx) {
                        // 本行在 [cidx] 后插入 colspan-1 个
                        arr = $(); // 准备待插单元格
                        for (var i = 0; i < colspan - 1; i++)
                            arr = arr.add($td.clone());
                        // 插入
                        $("th,td", this).eq(cidx).after(arr);

                    } else if (ridx < idx && idx < ridx + rowspan) {
                        // 以下行在 [cidx] 前插入 colspan 个
                        arr = $(); // 准备待插单元格
                        for (var i = 0; i < colspan; i++)
                            arr = arr.add($td.clone());
                        // 插入
                        if (cidx > 0 && $("th,td", this).eq(cidx - 1).length > 0)
                            $("th,td", this).eq(cidx - 1).after(arr);
                        else if ($("th,td", this).eq(cidx).length > 0)
                            $("th,td", this).eq(cidx).before(arr);
                        else
                            $(this).prepend(arr);
                    }
                });
            });

            var rmin = 10000,
                    cmin = 10000;
            var rmax = 0,
                    cmax = 0;
            var rnum, cnum;
            // 计算起始和跨距
            $("th,td", $t).filter("." + sigSel).each(function () {
                var ridx = $("tr", $t).index($(this).parent("tr"));
                rmin = ridx < rmin ? ridx : rmin;
                rmax = ridx > rmax ? ridx : rmax;
                var cidx = $(this).parent().children("th,td").index(this);
                cmin = cidx < cmin ? cidx : cmin;
                cmax = cidx > cmax ? cidx : cmax;
            });
            rnum = rmax - rmin + 1;
            cnum = cmax - cmin + 1;

            // 合并单元格
            $("th,td", $t).each(function () {
                var ridx = $("tr", $t).index($(this).parent("tr"));
                var cidx = $(this).parent().children("th,td").index(this);
                // 标记单元格待删
                if (rmin <= ridx && ridx <= rmax && cmin <= cidx && cidx <= cmax)
                    $(this).addClass(sigDel);
                // 处理被选左上角单元格
                if (ridx == rmin && cidx == cmin)
                    $(this).removeClass(sigDel).attr({
                        rowspan: rnum,
                        colspan: cnum
                    });
                // 清理残余
                if ($(this).attr("rowspan") == 1) $(this).removeAttr("rowspan");
                if ($(this).attr("colspan") == 1) $(this).removeAttr("colspan");
            }).remove("." + sigDel);
            // 移除标记单元格

            ShowSelected(); // 更新选择结果文字
        }
        ;

        function splitTable() {
            var $t = $("#t");

            if ($("table", $t).length > 0) {
                alert("不支持嵌套表格!");
                return;
            }
            var sigDel = "sign4delete"; // 删除标记,类名,自定义
            var sigSel = "ui-selected"; // 选中标记,类名,jQuery UI 定义
            // 补充单元格以便后继正确计算坐标
            $("th,td", $t).each(function () {
                // 坐标要实时计算,因会实时补充
                var ridx = $("tr", $t).index($(this).parent("tr"));
                var cidx = $(this).parent().children("th,td").index(this);
                var rowspan = Number($(this).attr("rowspan")) || 1;
                var colspan = Number($(this).attr("colspan")) || 1;
                var isSel = $(this).hasClass(sigSel);
                // 非选单元格拆出的单元格要加删除标记

                if (rowspan <= 1 && colspan <= 1)
                    return;
                if (isSel)
                    $(this).removeAttr("colspan").removeAttr("rowspan");
                // 跨格开插
                $("tr", $t).each(function () {

                    var idx = $("tr", $t).index(this);
                    var arr, $td = $("<td>");

                    if (!isSel)
                        $td.addClass(sigDel);
                    var new_cidx = 0 + cidx;
                    $("th[colspan]:not('." + sigDel + "'),td[colspan]:not('." + sigDel + "')", this).each(function () {
                        var temp_cidx = $(this).parent().children("th,td").index(this);
                        if (temp_cidx < cidx) {
                            new_cidx += parseInt($(this).attr("colspan")) - 1;
                        }
                    })
                    if (idx == ridx) {
                        // 本行在 [cidx] 后插入 colspan-1 个

                        arr = $(); // 准备待插单元格
                        for (var i = 0; i < colspan - 1; i++) {
                            var temp_td = $td;
                            temp_td.html('<input type="text" name="b' + (new_cidx + i + 2) + '" class="ui-selectee" style="width: 98%;">');
                            arr = arr.add($(temp_td).clone());
                        }
                        $("th,td", this).eq(cidx).after(arr);

                    } else if (ridx < idx && idx < ridx + rowspan) {
                        // 以下行在 [cidx] 前插入 colspan 个

                        arr = $(); // 准备待插单元格

                        for (var i = 0; i < colspan; i++) {
                            var temp_td = $td;
                            temp_td.html('<input type="text" name="b' + (new_cidx + i + 1) + '" class="ui-selectee" style="width: 98%;">');
                            arr = arr.add($(temp_td).clone());
                        }
                        if (cidx > 0 && $("th,td", this).eq(cidx - 1).length > 0)
                            $("th,td", this).eq(cidx - 1).after(arr);
                        else if ($("th,td", this).eq(cidx).length > 0)
                            $("th,td", this).eq(cidx).before(arr);
                        else
                            $(this).prepend(arr);
                    }
                });
            });

            // 重新获取以取到删者并删之
            $("th,td", $t).remove("." + sigDel);

            ShowSelected(); // 更新选择结果文字
        }
        ;

        function autocreate() {
            //创建table表格

            var table = document.createElement("table");
            table.id = 't';
            var getTable = document.getElementById("layerTable");
            try {
                getTable.innerHTML = "";
            } catch (e) {
            }
            //获取行数值
            var line = document.getElementById("rowNum").value;
            //获取列数值
            var list = document.getElementById("colNum").value;
            for (var i = 1; i <= line; i++) {
                //alert(line);
                //创建tr
                var tr = document.createElement("tr");
                for (var j = 1; j <= list; j++) {
                    //alert(list);
                    //创建td
                    var td = document.createElement("td");
                    var newInput = document.createElement("input");
                    newInput.type = 'text';
                    newInput.name = "b" + j;
                    newInput.style.width = "98%";
                    td.appendChild(newInput);
                    tr.appendChild(td);
                }
                table.appendChild(tr);
            }
            getTable.appendChild(table);
            var tWidth = $("#tWidth").val();
            $("#layerTable").width(tWidth);
            $("#allTable").width(tWidth);
            mtSelectable();
            height8();
            width1();
        }

    </script>

 

© 著作权归作者所有

共有 人打赏支持
喜喜呀
粉丝 0
博文 4
码字总数 1315
作品 0
厦门
如何解决ABBYY FineReader中表格检测不到问题

ABBYY FineReader 12是一款OCR文字识别软件,使用ABBYY FineReader识别带有表格的文档时,表格区域对以表格形式排列的表格或文本片断进行标记,但有时会出现程序自动检测表格失败的现象,需使...

ABBYY
2015/10/16
398
0
jquery对table表格的常用操作

一、删除行 //删除除第一行外的所有行 $("#table1 tr:not(:first)").remove();//删除指定行$("#table1 tr:eq(3)").remove(); 二、删除一列 //删除除第一列外的所有列 $("#table1 tr th:not(:...

学习也休闲
2016/03/28
96
0
使用wpf如何开发一个网格控件

各位有没有写过类似于visio的软件。我最近的一个项目有这个类似visio的建议拖拽控件的要求。碰到了一个问题。要让用户可以拖拽网格控件。这个网格就像word里面的表格一样,可以合并单元格、拆...

JoiT
2016/01/01
334
1
创建和管理Excel文件的控件Spire.XLS for .NET

Spire.XLS for .NET控件是e-iceblue公司开发的一款支持对所有Excel格式类型文件进行操作的.NET 控件。它适用于任何类型的应用程序比如ASP.NET Web应用程序或者Windows桌面应用程序。Spire.X...

netkongjian
2014/06/24
0
0
DevExpress v15.1:Document Server控件升级

<下载最新版DevExpress Document Server v15.1.5> PDF文档处理器 渲染API 在新的版本中,您可以使用下列元素在PDF页面上添加自己的图形: 图像 字符串 图形(线,Bezier曲线,多边形,椭圆和...

Miss_Hello_World
2015/09/07
50
0

没有更多内容

加载失败,请刷新页面

加载更多

linux使用ntfs-3g操作ntfs格式硬盘

Linux内核目前只支持对微软NTFS文件系统的读取。 NTFS-3G 是微软 NTFS 文件系统的一个开源实现,同时支持读和写。NTFS-3G 开发者使用 FUSE 文件系统来辅助开发,同时对可移植性有益。 安装 ...

linuxprobe16
今天
1
0
kubeadm部署kubernetes集群

一、环境要求 这里使用RHEL7.5 master、etcd:192.168.10.101,主机名:master node1:192.168.10.103,主机名:node1 node2:192.168.10.104,主机名:node2 所有机子能基于主机名通信,编辑...

人在艹木中
今天
7
0
Shell特殊符号总结以及cut,sort,wc,uniq,tee,tr,split命令

特殊符号总结一 * 任意个任意字符 ? 任意一个字符 # 注释字符 \ 脱义字符 | 管道符 # #号后的备注被忽略[root@centos01 ~]# ls a.txt # 备注 a.txt[root@centos01 ~]# a=1[root@centos01...

野雪球
今天
3
0
OSChina 周二乱弹 —— 程序员圣衣

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @达尔文:分享Skeeter Davis的单曲《The End of the World》 《The End of the World》- Skeeter Davis 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
18
0
[ python import module ] 导入模块

import moudle_name ----> import module_name.py ---> import module_name.py文件路径 -----> sys.path (这里进行查找文件) # from app.web import Personimport app.web.Person as Pe......

_______-
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部