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

最新推荐文章于 2022-10-25 11:09:56 发布
最新推荐文章于 2022-10-25 11:09:56 发布
阅读量158 收藏
点赞数
文章标签： javascript ui ViewUI
原文链接：https://my.oschina.net/u/3637273/blog/1527436
版权

114325_kjOD_3637273.png

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

 

转载于:https://my.oschina.net/u/3637273/blog/1527436

chunan7838
关注
thymeleaf双重循环_thymeleaf循环遍历
weixin_39588223的博客
12-21 1111
th:each属性用于迭代循环，语法：th:each="obj,iterStat:${objList}"迭代对象可以是Java.util.List,java.util.Map,数组等;iterStat称作状态变量，属性有：index:当前迭代对象的index(从0开始计算)count: 当前迭代对象的index(从1开始计算)size:被迭代对象的大小current:当前迭代变量even/odd:...
thinkphp导出到excel，合并拆分单元格！
addClasss的博客
08-28 826
导出到excel合并拆解单元格操作（奇怪操作） 接到需求做一个奇怪的产品表格，时间紧任务重，开始演示，目的以下样式 目标确定开始操作！ 首先数据格式为图中，我们需要先分析出这应该是一条数据但是需要合并company_list的数据重组数据代码 分割成两条数据 $newlist = []; // 重组数组 foreach ($new_arr1 as $k=>$v){ $temp = $v; $tempSix = $v['
如何快速地拆分合并的单元格并填充数据
weixin_30409849的博客
06-10 543
在做Excel数据表为了美观、直观，经常会把相同内容的单元格数据合并。但这样做破坏了Excel表的完整性，不利于后期数据分析。这就要我们把合并的单元格重新拆分并填充数据，如何快速实现呢？ https://jingyan.baidu.com/article/ff42efa91b43b6c19e2202f7.html 转...
表格生成latex程序工具-Tables Generator使用
stjuliet的博客
07-30 1万+
1、打开在线工具网址：https://www.tablesgenerator.com/latex_tables 2、在Excel中设计出需要的表格，如果单元格中有公式，从MathType中复制后需要将“\[”-"\]"对修改为“$”-"$"对，否则转换为Latex程序会出错： 3、将Excel表格复制到在线工具的表格区，并根据需要设置表格边框： 4、调整表格样式（居中、缩放等）、设置表格标题和标签，点击在线工具的“Generate"，生成Latex程序，复制到剪贴板： 5、将程序复制到.
列表多行多列合并单元格
05-12
列表多行多列合并单元格，对列表进行多列合并，在开发WEB报表中非常有用
table表格根据返回数据相同来合并对应的单元格（方法）
qq_43285335的博客
09-27 2639
$("table tbody").rowspan(colIdx); //通过返回数据的单位名字是否相同，把需要合并的列表合并 jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件 debugger; return this.each(function(){ var that; $('tr', t...
merge-table:对HTML表格进行合并拆分操作
05-31
HTML表格设计器可以快速的可视化设计一个表格，可以对单元格进行合并，拆分，添加，删除以及设置样式等操作，API简单易懂 ###第一步: grunt /*运行任务，生成js主文件*/ ###第二步: bower install /*安装依赖库*/ ##...
js动态表格合并拆分行
10-15
一个js例子实现了表格的动态合并，拆分单元格
python合并word单元格_使用win32com合并和取消合并单元格
weixin_39999859的博客
01-29 1183
所有人我在一个包含合并单元格的Word文档中有一个表格。我想使用win32com包取消合并这些单元格。在例如，第1行包含5个单元格，第2行包含6个单元格。在理想情况下，我希望取消合并第1行中的所有合并单元格，使未合并的单元格与第2行对齐，并使数据显示在生成的未合并范围的最左侧单元格中。在示例：(合并)+++++++++++++++++++++++++++++++++++++|hi |bye ...
freemarker导出word 表格拆分单元格
最新发布
02-04
然后，在 Freemarker 模板中，可以使用表格标签来生成表格。使用嵌套的 #list 指令来遍历行数据，使用嵌套的 #items 指令来遍历列数据。可以通过设定参数来控制表格的样式，例如边框、背景颜色等。 接下来，需要...
thymeleaf循环遍历集合并呈现在表格中
12-14
Thymeleaf是一个很好用的模板引擎, 可以完全取代JSP 需求 数据库中有张名为commanders的表存有多个人的信息, 现在通过后台去查询整张表, 返回一个集合, 要求使用thymeleaf动态的把集合内容以表格的形式展示在网页上 表的内容如下 后台关键代码如下 @Controller public class HelloController { @Autowired CommanderDao commanderDao; @RequestMapping("/list") public String queryAll(Map map) {
HTML相同值的行数据项进行单元格合并
hellolater的博客
10-25 1334
【代码】HTML相同值的行数据项进行单元格合并。
thymeleaf html中后台循环list集合数据 js动态合并单元格的做法
小姐姐
09-20 1万+
在开发过程中 我们从后台获取数据绑定list集合 但是我们需要实现跨行跨列 的表格。 难点： 属性拼接 th:class=" 'type_' +${var.getOrderType()}"使用‘+’； 获取属性值 td[class^='type_'] 错误想法： 我们第一个反应就是在td标签中rowspan。这个做法是错误的 他会导致数据错位，因为你每次都会循环同样一个<td r...
table表格遍历 合并单元格
weixin_34015860的博客
09-12 681
<c:forEach items="${list}" var="l" varStatus="status"> 　　<tr> 　　<c:if test="${ status.index == 0}"> <td rowspan="18">1</td> </c:if> 　　</tr> ...
【SpringBoot学习】03-th:each的使用
qqqking的博客
03-04 1395
迭代 <table border="1px"> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>总记录数</th> ...
如何快速地拆分合并的单元格并且填充原本的数据
Marcus丶的博客
10-23 6150
先放两张效果图 废话不多说，步骤如下： 1.选择列，然后点击“取消合并单元格” 2.在选中列的情况下，按下快捷键“F5”，弹出“定位”对话框，选择“定位条件”命令，选择“空值”选项，点击确定 3.这时所有空值的单元格会显示为选中状态，如图序号列是从A2开始，则直接输入公式为：“ =A2 ” ，输入完成后按下“Ctrl+Enter”快捷键，即可自动填充所有空值单元格。 【注：有时候会提示“未找到...
利用python-docx批量处理Word文件——表格（二）样式控制
热门推荐
不去想结果，一直在路上
10-28 2万+
表格样式可以分为两种：一要表格的自身的样式，比如边框，对齐方式、背景等，别一种是表格中文字的样式。本文的内容包括： 1. 表格样式 - 表格的对齐方式：居中、居左、居右 - 表格的亮度和高度 - 表格边框 2. 表格内容的样式 - 字体、字号 - 文字的对齐方式 - 文字颜色
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值