当前位置： 首页 > news >正文

html实现粘贴excel数据，在页面表格中复制

news 2025/11/5 11:29:55

录入数据时，有时候需要把excel中的数据一条条粘贴到页面中，当数据量过多时，这种操作很令人崩溃。本篇文章实现了从excel复制好多行数据后,可在页面粘贴的功能

具体实现代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>可编辑表格</title>
<style>#textarea {width: 80%;min-height: 100px;border: 1px solid #ccc;}table {width: 100%;border-collapse: collapse;}th, td {border: 1px solid #ccc;padding: 8px;text-align: left;}th {background-color: #f2f2f2;}
</style>
</head>
<body><textarea id="textarea"></textarea><table id="myTable"><thead><tr><th>姓名</th><th>年龄</th><th>职业</th></tr></thead><tbody><tr><td>张三</td><td>30</td><td>程序员</td></tr><tr><td>李四</td><td>28</td><td>设计师</td></tr></tbody></table><script>document.addEventListener('DOMContentLoaded', function() {const inputElement = document.getElementById('textarea');function handlePasteEvent(event) {// event.preventDefault(); // 可选：阻止默认粘贴行为// 获取粘贴板数据const clipboardData = event.clipboardData || window.clipboardData;const pastedData = clipboardData.getData('Text');// 初始化用于存储解析后的数据的数组let arr = [];try {arr = pastedData.split('\n').filter(item => item !== '') // 兼容Excel行末\n，防止出现多余空行.map(item => item.split('\t')) // 将每行按制表符分割成列.map(item => {// 去掉每列中的\r字符，使用模板字符串return item.map(str => str.replace(/\r/g, ''));});} catch (error) {console.error("Error parsing pasted data:", error);return; // 在遇到异常时终止处理}if (arr.length === 0) {console.warn("Pasted data is empty or in an unrecognized format.");return;}const table = document.getElementById("myTable");const cells = table.rows.item(0).cells.length; // 表格的列数// 创建一个文档片段，用于批量添加新行到DOM中，减少重绘次数const fragment = document.createDocumentFragment();arr.forEach(item => {const newRow = document.createElement("tr");for (let i = 0; i < cells; i++) {const newCell = document.createElement("td");newCell.textContent = item[i] || '';newRow.appendChild(newCell);}fragment.appendChild(newRow); // 先将新行添加到文档片段中});table.appendChild(fragment); // 最后将整个文档片段一次性添加到表格中}// 添加粘贴事件监听器inputElement.addEventListener('paste', handlePasteEvent);});</script>
</body>
</html>

效果图

在这里插入图片描述

相关文章：

html实现粘贴excel数据，在页面表格中复制

录入数据时&#xff0c;有时候需要把excel中的数据一条条粘贴到页面中&#xff0c;当数据量过多时&#xff0c;这种操作很令人崩溃。本篇文章实现了从excel复制好多行数据后,可在页面粘贴的功能 具体实现代码 <!DOCTYPE html> <html lang"en"> <head…...

编程日记 2024/6/13 15:38:36

WPF视频学习-简单应用篇图书馆程序（一）

1.登录界面和主界面跳转 先把登录界面分为三行《Grid》 先添加两行&#xff1a; <Grid><!--//分三行&#xff0c;行排列--><Grid.RowDefinitions><RowDefinition Height"auto"/><RowDefinition Height"auto"/><RowDef…...

编程日记 2024/6/13 15:34:30

Java+前端+Vue 后端Spring boot 开发的全套UWB定位方案,0.1米高精度定位系统源码

Java前端Vue 后端Spring boot 开发的全套UWB定位方案,0.1米高精度定位系统源码 UWB定位系统由硬件定位设备、定位引擎和应用软件组成。该定位系统应用软件支持PC端和移动端访问&#xff0c;并提供位置实时显示、历史轨迹回放、人员考勤、电子围栏、行为分析、智能巡检等功能…...

编程日记 2024/6/13 15:33:27

Mysql查询分析工具Explain的使用

一、前言 作为一名合格的开发人员&#xff0c;与数据库打交道是必不可少的&#xff0c;尤其是在业务规模和数据体量大规模增长的条件下&#xff0c;应用系统大部分请求读写比例在10:1左右&#xff0c;而且插入操作和一般的更新操作很少出现性能问题&#xff0c;遇到最多的&…...

编程日记 2024/6/13 15:29:23

OpenCV中的圆形标靶检测——findCirclesGrid()（一）

如前所述，OpenCV中可以使用findCirclesGrid()实现圆形标靶的检测，该函数的计算流程分为1）斑点形状的检测，和2）基于规则的斑点形状的过滤与定位。第一步将类似圆斑形状的区域检测出来，但可能存在一些误检测的噪声，第二步则利用圆斑的分布规则（M*N排列）进行进一步的过滤…...

编程日记 2024/6/13 15:25:17

2025广州眼博会，2025广东省眼睛健康及眼科产业展览会

广州全国眼睛健康产业博览会暨眼科医学大会&#xff0c;将于2025年4月在广州南丰国际会展中心盛大举办&#xff1b; 广州2025全国眼睛健康产业博览会暨眼科医学大会&#xff08;全国眼博会&#xff09; National Eye Health Industry Expo and Ophthalmic Medicine Conference…...

编程日记 2024/6/13 15:24:15

Vue3 自定义渲染器 API createRenderer()（七）

createRenderer() createRenderer() 是一个高级 API&#xff0c;它允许你创建自定义的渲染器。这个 API 主要是为了支持 Vue 的非 DOM 渲染目标&#xff0c;如 WebGL、Canvas、Web Workers、自定义 DOM 实现等。在实际使用中&#xff0c;自定义渲染器是一个复杂的任务&#xf…...

编程日记 2024/6/13 15:23:14

二分+ST表+递推，Cf 1237D - Balanced Playlist

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 Problem - 1237D - Codeforces 二、解题报告 1、思路分析 case3提示我们一件事情&#xff1a;如果存在某个位置永远不停止&#xff0c;那么所有位置都满足永远不停止 很容易证明 随着下标右移&#xff0c…...

编程日记 2024/6/13 15:20:10

被裁员不可怕，可怕的是你只会写代码！

“听说隔壁部门又要裁员了&#xff0c;人心惶惶的……” “是啊&#xff0c;这年头&#xff0c;工作真是越来越难了&#xff0c;谁知道下一个会不会是自己呢&#xff1f;” 这两天&#xff0c;公司里弥漫着一股紧张的气氛&#xff0c;裁员的消息&#xff0c;就像是一场突如其来…...

编程日记 2024/6/13 15:19:09

服务器之间的时间如何保证一致

服务器之间的时间一致性主要通过以下几种方法和技术来保证&#xff1a; NTP&#xff08;Network Time Protocol&#xff09;同步&#xff1a;这是最常见的时钟同步方法。NTP协议允许服务器从一个或多个时间服务器&#xff08;称为NTP服务器&#xff09;获取精确的时间信息&…...

编程日记 2024/6/13 15:18:08

算法体系-20 第二十节暴力递归到动态规划

前言 动态规划模型从尝试暴力递归到傻缓存到动态规划 四种模型和体系班两种模型一共六种模型 0.1 从左往右模型 0.2 范围讨论模型范围尝试模型 &#xff08;这种模型特别在乎讨论开头如何如何 结尾如何如何&#xff09; 玩家博弈问题&#xff0c;玩家玩纸牌只能那左或者右 0.3 …...

编程日记 2024/6/13 15:16:06

字符集相关变量理解

建表 创建一个新表&#xff0c;想让他的字符集是 gbk&#xff0c;怎么弄? 尝试1&#xff1a; 失败&#xff01;原因&#xff1a; set names gbk; 等价于&#xff1a;set character_set_client gbk; set character_set_connection gbk; set character_set_results gbk;尝…...

编程日记 2024/6/13 15:14:02

618哪些数码产品比较好？2024超高人气产品推荐！

随着6.18大促的脚步渐近&#xff0c;你是否已经按捺不住内心的激动&#xff0c;想要在网络购物的海洋中畅游&#xff0c;尽情享受购物的狂欢&#xff1f;然而&#xff0c;面对繁多的商品和各式各样的优惠活动&#xff0c;你是否感到了一丝迷茫&#xff1f;作为一位经验丰富的网…...

编程日记 2024/6/13 15:11:59

基础-01-计算机网络概论

一. 计算机网络的发展与分类 1.计算机网络的形成与发展 计算机网络&#xff1a;计算机技术与通信技术的结合 ICTITCT 2.计算机网络标准阶段 3.计算机网络分类1:通信子网和资源子网 通信子网:通信节点(集线器、交换机、路由器等)和通信链路(电话线、同轴电缆、无线电线路、卫…...

编程日记 2024/6/13 15:10:58

STM32学习笔记（一）--时钟树详解

&#xff08;1&#xff09;时钟概述&#xff1b;时钟是具有周期性的脉冲信号&#xff0c;最常用的是占空比50%的方波。&#xff08;时钟相当于单片机的脉搏&#xff1b;STM32本身非常复杂&#xff0c;外设非常的多&#xff0c;为了保持低功耗工作&#xff0c;STM32 的主控默认不…...

编程日记 2024/6/13 15:09:57

JAVA小知识16：JAVA常用的API

一、Math 方法名说明public static int abs(int a)获取参数绝对值public static double ceil(double a)向上取整public static double floor(double a)向下取整public static int round(float a)四舍五入public static int max(int a,int b)获取两个int值中的较大值public s…...

编程日记 2024/6/13 15:07:54

PaddleDetection快速体验quick_start

1 快速体验 # 设置显卡 export CUDA_VISIBLE_DEVICES0# 用PP-YOLO算法在COCO数据集上预训练模型预测一张图片 python tools/infer.py -c configs/ppyolo/ppyolo_r50vd_dcn_1x_coco.yml -o use_gputrue weightshttps://paddledet.bj.bcebos.com/models/ppyolo_r50vd_dcn_1x_coc…...

编程日记 2024/6/13 15:06:53

《Foundation CSS 参考手册》

《Foundation CSS 参考手册》 引言 Foundation 是一个强大的前端框架&#xff0c;它为开发者提供了一系列的CSS工具和组件&#xff0c;以便快速构建响应式、移动优先的网站。本参考手册旨在为那些希望深入了解和使用Foundation CSS的开发者提供一个全面的指南。 基础知识 1…...

编程日记 2024/6/13 15:05:51

方法递归-结合案例阶乘问题、求和问题和猴子吃桃问题

方法递归 递归是一种算法 在程序设计语言中广泛应用. 从形式上来说&#xff1a;方法调用自身的形式称为方法递归&#xff08;recursion&#xff09;. 递归的形式&#xff1a; 直接递归&#xff1a;方法调用自己。间接递归&#xff1a;方法调用其他方法&#xff0c;其他方法…...

编程日记 2024/6/13 15:04:49

有一个主域名跟多个二级子域名时该怎么申请SSL证书？

当您拥有主域名以及多个子域名时&#xff0c;选择合适的SSL证书类型对于确保网站的安全性至关重要。以下是三种SSL证书类型的简要介绍&#xff1a; 单域名SSL证书&#xff1a; 功能&#xff1a;只能绑定单个域名&#xff0c;无论是主域名还是子域名。 适用场景&#xff1a;仅…...

编程日记 2024/6/13 15:03:47

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

编程新知 2025/10/1 22:26:06

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

编程新知 2025/11/2 22:52:17

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2025/11/1 2:53:34

跨链模式：多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

编程新知 2025/11/2 21:51:45

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2025/11/1 15:26:54

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

编程新知 2025/11/3 14:31:36

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

编程新知 2025/11/3 0:44:41

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

编程新知 2025/10/27 5:23:59

Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

编程新知 2025/10/4 21:24:40

NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

编程新知 2025/10/25 13:34:22