将HTML页面中的table表格元素转换为矩形,计算出每个单元格的宽高以及左上角坐标点,输出为json数据

news2024/12/24 9:03:15
export function huoQuTableElement() {
    const tableData = []; // 存储表格数据的数组
    let res = [];

    // 获取到包含表格的foreignObject元素
    const foreignObject = document.getElementById('mydctable');

    if (!foreignObject){
        return '';
    }

    // 获取到表格元素
    let oldTable = foreignObject.querySelector('table');

    if (!oldTable){
        return '';
    }

    // 复制表格元素
    let newTable = oldTable.cloneNode(true);

    // 将新表格添加到页面中
    foreignObject.appendChild(newTable);

    //以下方法将合并后的表格还原为未合并的状态
    let rows = newTable.rows;

    for (let i = 0; i < rows.length; i++) {
        let cells = rows[i].cells;

        for (let j = 0; j < cells.length; j++) {
            let cell = cells[j];
            let rowspan = cell.getAttribute('rowspan');
            let colspan = cell.getAttribute('colspan');
            let scope = cell.getAttribute('scope');
            if (rowspan === null){
                rowspan = 1
            }
            cell.setAttribute('data-original-rowspan', rowspan); // 存储原始的 rowspan 值

            if (rowspan && parseInt(rowspan) > 1) {
                let copyContent = cell.innerHTML; // 保存当前单元格的内容

                for (let k = 1; k < parseInt(rowspan); k++) {
                    let nextRow = rows[i + k];
                    if (nextRow) {
                        if (nextRow && j >= 0 && j < nextRow.cells.length) {
                            let nextCell = nextRow.insertCell(j);
                            nextCell.innerHTML = copyContent; // 复制内容到被合并的位置
                            if (colspan) {
                                nextCell.colSpan = parseInt(colspan); // 添加colspan属性
                            }
                            if (scope) {
                                nextCell.scope = scope; // 添加scope属性
                            }
                            nextCell.style.color = 'white'; // 设置文字颜色为白色
                            nextCell.style.border = '1px solid white'; // 设置表格边框为白色
                            nextCell.setAttribute('data-remove', true); //标记为合并单元格,计算时需要删除
                        }
                    }
                }

                cell.removeAttribute('rowspan');
                cell.innerHTML = copyContent; // 在当前单元格复制内容
                if (colspan) {
                    cell.colSpan = parseInt(colspan); // 添加colspan属性
                }
                if (scope) {
                    cell.scope = scope; // 添加scope属性
                }
            }
        }
    }

    //以下方法获取到每个单元格的坐标点和宽高
    let cells = newTable.querySelectorAll('td, th');

    // 设置固定的参考点坐标
    let referenceX = 100; // 参考点的横坐标
    let referenceY = 100; // 参考点的纵坐标

    cells.forEach(cell => {
        let cellText = cell.textContent.trim(); // 单元格内容
        let cellRect = cell.getBoundingClientRect(); // 单元格位置信息
        let rowspan = cell.getAttribute('data-original-rowspan'); // 单元格合并信息
        let dataRemove = cell.getAttribute('data-remove');

        // 计算单元格左上角坐标相对于固定参考点的偏移量并四舍五入为整数
        let offsetX = Math.round(cellRect.left - referenceX);
        let offsetY = Math.round(cellRect.top - referenceY);

        // 封装单元格数据为 JSON 对象
        if (rowspan == null || rowspan === 'null' || rowspan === '' || rowspan === undefined){
            rowspan = 1
        }

        if (!dataRemove){
            let cellData = {
                content: cellText,
                rowspan: parseInt(rowspan),
                x: offsetX,
                y: offsetY + (Math.round(cellRect.height) * (parseInt(rowspan)-1)),
                width: Math.round(cellRect.width),
                height: Math.round(cellRect.height) * parseInt(rowspan)
            };
            tableData.push(cellData); // 将单元格数据添加到数组
        }
    });

    const jsonData = JSON.stringify({ rects: tableData });

    res.push(JSON.parse(jsonData))
    console.log(res)
    return res;
}

最后输出的格式如下所示:content是单元格的文字内容。x和y是单元格左上角的坐标点,width和height是单元格的宽高。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1796472.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

python tk实现标签切换页面

import tkinter as tk from tkinter import ttk# 初始化主窗口 root tk.Tk() root.title("标签页示例")# 设置窗口大小 root.geometry("400x300")# 创建 Notebook 小部件 notebook ttk.Notebook(root) notebook.pack(expandTrue, fill"both")#…

【leetcode面试经典150题】-45. 跳跃游戏 II

【leetcode面试经典150题】-45. 跳跃游戏 II 1 题目介绍2 个人解题思路2.1 代码 3 官方题解3.1 代码 1 题目介绍 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] …

[职场] 研究生面试自我介绍_1 #经验分享#知识分享

研究生面试自我介绍 想要进入职场&#xff0c;面试是必不可少的。然而想要面试成功&#xff0c;就需要一个让人印象深刻的自我介绍&#xff0c;好的自我介绍可以让面试官&#xff0c;快速了解自己&#xff0c;快速记住自己。 一、范文1 我是一名硕士研究生&#xff0c;即将毕业…

如何查询公网IP?

在互联网中&#xff0c;每个设备都有一个唯一的公网IP地址&#xff0c;用于标识设备在全球范围内的位置。查询公网IP是一个常见的需求&#xff0c;无论是用于远程访问、网络配置还是其他目的&#xff0c;了解自己的公网IP地址都是很有必要的。本文将介绍几种常见的方法来查询公…

【ArcGISProSDK】 读取多面体信息并导出XML

结果展示 代码 using ArcGIS.Core.CIM; using ArcGIS.Core.Data; using ArcGIS.Core.Data.DDL; using ArcGIS.Core.Geometry; using ArcGIS.Core.Internal.CIM; using ArcGIS.Desktop.Catalog; using ArcGIS.Desktop.Core; using ArcGIS.Desktop.Editing; using ArcGIS.Deskto…

DSP问题:CCS更改工程名导入报错

1、问题现象 复制一个工程出来后&#xff0c;修改版本号&#xff0c;重新导入工程后报错。 显示项目描述无效。 2、问题原因 由于CCS无法通过工程描述中找到指定名字文件夹。使用记事本打开.project文件&#xff0c;里面的描述还是以前的文件夹名&#xff0c;所以导入时报…

达梦8 网络中断对系统的影响

测试环境&#xff1a;三节点实时主从 版本&#xff1a;--03134283938-20221019-172201-20018 测试1 系统没有启动确认监视器 关闭节点3网卡 登录节点1检查主库状态 显示向节点2发送归档成功&#xff0c;但无法收到节点3的消息&#xff0c;节点1挂起 日志报错如下&#xf…

《系统架构设计师教程(第2版)》第11章-未来信息综合技术-02-人工智能技术概述

文章目录 1. 人工智能&#xff08;AI&#xff09;1.1 弱人工智能1.2 强人工智能 2. 人工智能的发展历程3. 人工智能关键技术31. 自然语言处理 (Natural Language Processing)3.2 计算机视觉 (Computer Vision)3.3 知识图谱 (Knowledge Graph)3.4 人机交互 (Human-Computer Inte…

Linux - 深入理解/proc虚拟文件系统:从基础到高级

文章目录 Linux /proc虚拟文件系统/proc/self使用 /proc/self 的优势/proc/self 的使用案例案例1&#xff1a;获取当前进程的状态信息案例2&#xff1a;获取当前进程的命令行参数案例3&#xff1a;获取当前进程的内存映射案例4&#xff1a;获取当前进程的文件描述符 /proc中进程…

二叉树的先序创建、复制、深度及结点个数

文章目录 前言一、二叉树的先序创建二、二叉树的复制三、二叉树的深度四、二叉树的结点个数总结 前言 T_T此专栏用于记录数据结构及算法的&#xff08;痛苦&#xff09;学习历程&#xff0c;便于日后复习&#xff08;这种事情不要啊&#xff09;。所用教材为《数据结构 C语言版…

每天坚持写java锻炼能力---第一天(6.4)

今天的目标是菜单&#xff1a; B站/马士兵的项目菜单 package java1;import java.util.Scanner;public class Test {public static void main(String[] args) {while(true){ //3.加入死循环&#xff0c;让输入一直有System.out.println();System.out.println("--->项…

DearLicy主题 小清新风格的博客主题源码 Typecho主题

简介 DearLicy主题&#xff0c;一款小众化小清新风格的博客主题 主题支持Typecho所支持的所有版本PHP 简约、小众、优雅 安装教程 1.将主题上传至/usr/themes/文件夹下解压 2.后台进行启用 3.访问前台查看效果 界面 下载地址&#xff1a;DearLicy主题 小清新风格的博客主…

c++ 里函数选择的优先级:普通函数、模板函数、万能引用,编译器选择哪个执行呢?

看大师写的代码时&#xff0c;除了在类里定义了 copy 构造函数&#xff0c;移动构造函数&#xff0c;还定义了对形参采取万能引用的构造函数&#xff0c;因此有个疑问&#xff0c;这时候的构造函数优先级是什么样的呢&#xff1f;简化逻辑测试一下&#xff0c;如下图&#xff0…

初探沁恒CH32V307VCT6评估板 2-1定时器TIM

定时器每隔一秒计次一次 1&#xff0c;创建 .C .H 文件 Timer.c Timer.h 2&#xff0c;包含头文件 #include "ch32v30x.h" //#include "debug.h" #include "Timer.h" 注意&#xff1a;如果不包含第一第二个头文件uint、int这些定义就会报…

力扣 48.旋转图像

题目描述&#xff1a; 给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。 你必须在 原地 旋转图像&#xff0c;这意味着你需要直接修改输入的二维矩阵。请不要 使用另一个矩阵来旋转图像。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,2,3],…

华为鲲鹏应用开发基础: 计算机系统概述(一)

1. 计算机系统演进及分类 1.1 计算机发展的四个阶段 1.2 当前计算机通常分为以下五类: 分类超级计算机大型计算机迷你计算机(服务器)微型计算机工作站特点• 功能最强、运算速度最快、 存储容量最大的计算机 • 多用于国家高科技领域和 尖端技术研究 例如,“神威太湖之光”…

Qt for Android 之 OpenCV编译(Windows下编译)

简介 前两天刚好更新了4.10, 这里以4.10作为示例进行编译&#xff0c; Qt版本是Qt6.6.2。 准备OpenCV的Android库 一. 使用官方编译好的库 1. 下载OpenCV android SDK opencv-4.10.0-android-sdk.zip 2. 解压缩 官方提供的包含了多个架构的opencv android库 二. 自行编译…

VS2015 +Qt 新建单元测试工程报错error LNK2019,error LNK2001: 无法解析的外部符号 WinMain

项目场景&#xff1a; 使用Qt5.9.9和vs2015进行单元测试工程的创建 问题描述 创建完成后&#xff0c;编译项目&#xff0c;报错&#xff1a; error LNK2019&#xff0c;error LNK2001: 无法解析的外部符号 WinMain 原因分析&#xff1a; 原因是笔者创建工程的时候&#xf…

创新案例 | AI数据驱动下的全域数字化转型的五大关键洞见

近年来通过全域数字化转型在竞争激烈的市场中脱颖而出。传统零食行业面临市场竞争加剧和消费者需求多样化的挑战&#xff0c;如何利用数据驱动和AI技术&#xff0c;能更好地实现会员运营效率和用户满意度的显著提升呢&#xff1f;本文将探讨全域数字化转型的五大关键洞见&#…

SQL刷题笔记day8——SQL进阶——表与索引操作

目录 1 创建一张新表 2 修改表 3 删除表 4 创建索引 5 删除索引 1 创建一张新表 我的答案 create table if not exists user_info_vip (id int(11) primary key auto_increment Comment自增ID, # 有了主键就不用写not nul了 uid int(11) unique not null Comment用户ID, …