首页 > 其他分享 >table 单元格合并

table 单元格合并

时间:2024-10-08 10:12:28浏览次数:10  
标签:py px 单元格 合并 merge table

table 元素合并单元格,用法倒是很简单,但过程中遇到了点小问题,记录下:

1、多行多列合并,使用  rowSpan、colSpan 设置要合并的行列数,再将合并后的多余单元格删除即可:

function merge(table, px, py, row, col, remove = true) {
        py--;
        let target = table.rows[px].cells[py];
        target.rowSpan = row;
        target.colSpan = col;
        // 删除 被合并的单元格
        for (let i = row - 1; i >= 0; i --) {
            for (let j = col - 1; j >= 0; j --) {
                // 同行的合并行,删除非本身
                if (i === 0 && j === 0) {
                } else {
                    remove && (table.rows[px + i].removeChild(table.rows[px + i].cells[py + j]));
                }
            }
        }
    }

2、设置合并,看效果:

// 手动合并,起始点[行,列],行数,列数,倒着处理
merge(table, 4, 4, 3, 2);
merge(table, 4, 2, 2, 2);
merge(table, 4, 1, 3, 1);

3、在合并交错行单元格时,则遇到了错乱的问题:

merge(table, 2, 5, 2, 2);
merge(table, 1, 1, 2, 4);

4、做了个不删除的单元格看了下对比,发现第二行整体都没了,导致了格子没撑起来:

5、做个第7列,设置隐藏,保证删掉合并的单元格后,每行都有单个未合并的单元格存在,布局就不会错乱:

 

标签:py,px,单元格,合并,merge,table
From: https://www.cnblogs.com/guofan/p/18451120

相关文章

  • 如果 表名 拼写错误或表不存在,你会看到 #1146 - Table 'ecms.表名' doesn't exist 的
    <?php$servername="localhost";$username="your_username";$password="your_password";$dbname="ecms";//创建连接$conn=newmysqli($servername,$username,$password,$dbname);//检查连接if($conn->connect......
  • element-plus如何使用可编辑的table
    ElementPlus的Table组件本身不提供内置的编辑功能。但是可以通过结合Table组件和Form组件来实现行级别的可编辑功能<template><el-table:data="tableData"style="width:100%"><el-table-columnprop="date"label="日期"width="180&quo......
  • GitHub上 Star 数量最多的 Airtable 开源替代者
    相信你一定对Airtable不陌生。Airtable于2012年由创立,真正开始走红大概是在2018年左右,那个时候它的用户数量和市场份额突然大幅增加。这归功于它直观的界面和易用性——相比起传统的数据库系统,用户不需要任何编程技能,就能通过简单的拖拽操作搭建一个功能强大的管理工具。......
  • 在K8S中,kube-proxy ipvs和 iptables 有何异同?
    在Kubernetes(K8s)中,kube-proxy是负责服务发现和负载均衡的关键组件,它支持多种代理模式,其中IPVS和iptables是两种常用的模式。以下是kube-proxy在IPVS和iptables模式下的异同点:1.相同点服务发现和负载均衡:IPVS和iptables模式都用于实现Kubernetes中的服务发现和负载均衡功能。......
  • 在K8S中,kube-proxy iptables原理是什么?
    在Kubernetes中,kube-proxy使用不同模式来实现其功能,其中iptables模式是早期广泛使用的模式之一。下面详细介绍kube-proxy使用iptables模式的基本原理。1.iptables原理概述iptables是Linux内核的一部分,用于定义网络封包过滤规则。它是一个用户空间的应用程序,用来设......
  • iptables一句话修复安全漏洞
    iptables一句话修复安全漏洞原创 龚诗嘉 运维前沿  2024年08月30日08:20 辽宁 听全文  iptables一句话安全修复漏洞安全漏洞对于开发和运维人员来说总是灾难,而且总是来的猝不及防CVE-2022-22947GET /actuator/gateway/routes HTTP/1.1Host: 127.0.0.1:......
  • java之使用CompletableFuture入门2
    Java17- 序章本文介绍用过的allOf、anyOf函数的用法。 allOf 函数原型两点:1、没有返回值。2、参数cfs中任何一个都不能是null。 anyOf函数原型两点:1、有返回值,为Object。2、参数cfs中任何一个都不能是null。 allOf测试意图:多个任务正常执......
  • 使用openpyxl读取Excel设置了公式的单元格 默认读取的是公式而不是公式结果
    使用openpyxl对单元格有公式的Excel的sheet进行操作,如果又读又写,可以采用双重读取方式解决。在Excel中,如果单元格的值是通过公式计算的,而你通过openpyxl库读取时发现获取的是公式而非结果,原因是openpyxl默认只读取单元格的公式而不计算公式的结果。为了获取公式计算后的......
  • 代码随想录算法训练营 | 56. 合并区间,738.单调递增的数字
    56.合并区间题目链接:56.合并区间文档讲解︰代码随想录(programmercarl.com)视频讲解︰合并区间日期:2024-10-06想法:重叠区间类似问题Java代码如下:classSolution{publicint[][]merge(int[][]intervals){List<int[]>res=newArrayList<>();Arra......
  • Hashtable  Complete the following
    Assignment3:Hashtable Assignment3:HashtableDueNoDueDate Points100Submittingafileupload StartAssignment Language:JavaorPythonorC++ TaskDescription:Completethefollowingtask. Task-1:ImplementaHashdatastructurefromscratch.Yo......