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

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

news 2026/2/7 21:17:51

录入数据时，有时候需要把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

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

编程新知 2025/9/10 5:36:56

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

编程新知 2026/2/5 17:57:20

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一）

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

编程新知 2026/1/23 12:18:20

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/11/9 19:17:07

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

编程新知 2026/1/25 14:40:59

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版&#xff0c;莫兰迪调色板清新简约工作汇报PPT模版&#xff0c;莫兰迪时尚风极简设计PPT模版&#xff0c;大学生毕业论文答辩PPT模版&#xff0c;莫兰迪配色总结计划简约商务通用PPT模版&#xff0c;莫兰迪商务汇报PPT模版&#xff0c;…...

编程新知 2026/1/29 10:37:37

实战三：开发网页端界面完成黑白视频转为彩色视频

​一、需求描述 设计一个简单的视频上色应用&#xff0c;用户可以通过网页界面上传黑白视频&#xff0c;系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观&#xff0c;不需要了解技术细节。 效果图 ​二、实现思路 总体思路&#xff1a; 用户通过Gradio界面上…...

编程新知 2026/2/5 5:03:25

Spring Security 认证流程——补充

一、认证流程概述 Spring Security 的认证流程基于 过滤器链&#xff08;Filter Chain&#xff09;&#xff0c;核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤&#xff1a; 用户提交登录请求拦…...

编程新知 2026/2/4 17:50:55