html实现粘贴excel数据,在页面表格中复制
录入数据时,有时候需要把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数据,在页面表格中复制
录入数据时,有时候需要把excel中的数据一条条粘贴到页面中,当数据量过多时,这种操作很令人崩溃。本篇文章实现了从excel复制好多行数据后,可在页面粘贴的功能 具体实现代码 <!DOCTYPE html> <html lang"en"> <head…...
WPF视频学习-简单应用篇图书馆程序(一)
1.登录界面和主界面跳转 先把登录界面分为三行《Grid》 先添加两行: <Grid><!--//分三行,行排列--><Grid.RowDefinitions><RowDefinition Height"auto"/><RowDefinition Height"auto"/><RowDef…...
Java+前端+Vue 后端Spring boot 开发的全套UWB定位方案,0.1米高精度定位系统源码
Java前端Vue 后端Spring boot 开发的全套UWB定位方案,0.1米高精度定位系统源码 UWB定位系统由硬件定位设备、定位引擎和应用软件组成。该定位系统应用软件支持PC端和移动端访问,并提供位置实时显示、历史轨迹回放、人员考勤、电子围栏、行为分析、智能巡检等功能…...
Mysql查询分析工具Explain的使用
一、前言 作为一名合格的开发人员,与数据库打交道是必不可少的,尤其是在业务规模和数据体量大规模增长的条件下,应用系统大部分请求读写比例在10:1左右,而且插入操作和一般的更新操作很少出现性能问题,遇到最多的&…...
OpenCV中的圆形标靶检测——findCirclesGrid()(一)
如前所述,OpenCV中可以使用findCirclesGrid()实现圆形标靶的检测,该函数的计算流程分为1)斑点形状的检测,和2)基于规则的斑点形状的过滤与定位。第一步将类似圆斑形状的区域检测出来,但可能存在一些误检测的噪声,第二步则利用圆斑的分布规则(M*N排列)进行进一步的过滤…...
2025广州眼博会,2025广东省眼睛健康及眼科产业展览会
广州全国眼睛健康产业博览会暨眼科医学大会,将于2025年4月在广州南丰国际会展中心盛大举办; 广州2025全国眼睛健康产业博览会暨眼科医学大会(全国眼博会) National Eye Health Industry Expo and Ophthalmic Medicine Conference…...
Vue3 自定义渲染器 API createRenderer()(七)
createRenderer() createRenderer() 是一个高级 API,它允许你创建自定义的渲染器。这个 API 主要是为了支持 Vue 的非 DOM 渲染目标,如 WebGL、Canvas、Web Workers、自定义 DOM 实现等。在实际使用中,自定义渲染器是一个复杂的任务…...
二分+ST表+递推,Cf 1237D - Balanced Playlist
一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 Problem - 1237D - Codeforces 二、解题报告 1、思路分析 case3提示我们一件事情:如果存在某个位置永远不停止,那么所有位置都满足永远不停止 很容易证明 随着下标右移,…...
被裁员不可怕,可怕的是你只会写代码!
“听说隔壁部门又要裁员了,人心惶惶的……” “是啊,这年头,工作真是越来越难了,谁知道下一个会不会是自己呢?” 这两天,公司里弥漫着一股紧张的气氛,裁员的消息,就像是一场突如其来…...
服务器之间的时间如何保证一致
服务器之间的时间一致性主要通过以下几种方法和技术来保证: NTP(Network Time Protocol)同步:这是最常见的时钟同步方法。NTP协议允许服务器从一个或多个时间服务器(称为NTP服务器)获取精确的时间信息&…...
算法体系-20 第二十节暴力递归到动态规划
前言 动态规划模型从尝试暴力递归到傻缓存到动态规划 四种模型和体系班两种模型一共六种模型 0.1 从左往右模型 0.2 范围讨论模型范围尝试模型 (这种模型特别在乎讨论开头如何如何 结尾如何如何) 玩家博弈问题,玩家玩纸牌只能那左或者右 0.3 …...
字符集相关变量理解
建表 创建一个新表,想让他的字符集是 gbk,怎么弄? 尝试1: 失败!原因: set names gbk; 等价于:set character_set_client gbk; set character_set_connection gbk; set character_set_results gbk;尝…...
618哪些数码产品比较好?2024超高人气产品推荐!
随着6.18大促的脚步渐近,你是否已经按捺不住内心的激动,想要在网络购物的海洋中畅游,尽情享受购物的狂欢?然而,面对繁多的商品和各式各样的优惠活动,你是否感到了一丝迷茫?作为一位经验丰富的网…...
基础-01-计算机网络概论
一. 计算机网络的发展与分类 1.计算机网络的形成与发展 计算机网络:计算机技术与通信技术的结合 ICTITCT 2.计算机网络标准阶段 3.计算机网络分类1:通信子网和资源子网 通信子网:通信节点(集线器、交换机、路由器等)和通信链路(电话线、同轴电缆、无线电线路、卫…...
STM32学习笔记(一)--时钟树详解
(1)时钟概述;时钟是具有周期性的脉冲信号,最常用的是占空比50%的方波。(时钟相当于单片机的脉搏;STM32本身非常复杂,外设非常的多,为了保持低功耗工作,STM32 的主控默认不…...
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…...
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…...
《Foundation CSS 参考手册》
《Foundation CSS 参考手册》 引言 Foundation 是一个强大的前端框架,它为开发者提供了一系列的CSS工具和组件,以便快速构建响应式、移动优先的网站。本参考手册旨在为那些希望深入了解和使用Foundation CSS的开发者提供一个全面的指南。 基础知识 1…...
方法递归-结合案例阶乘问题、求和问题和猴子吃桃问题
方法递归 递归是一种算法 在程序设计语言中广泛应用. 从形式上来说:方法调用自身的形式称为方法递归(recursion). 递归的形式: 直接递归:方法调用自己。间接递归:方法调用其他方法,其他方法…...
有一个主域名跟多个二级子域名时该怎么申请SSL证书?
当您拥有主域名以及多个子域名时,选择合适的SSL证书类型对于确保网站的安全性至关重要。以下是三种SSL证书类型的简要介绍: 单域名SSL证书: 功能:只能绑定单个域名,无论是主域名还是子域名。 适用场景:仅…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站,会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后,网站没有变化的情况。 不熟悉siteground主机的新手,遇到这个问题,就很抓狂,明明是哪都没操作错误&#x…...
线程同步:确保多线程程序的安全与高效!
全文目录: 开篇语前序前言第一部分:线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分:synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...
什么是库存周转?如何用进销存系统提高库存周转率?
你可能听说过这样一句话: “利润不是赚出来的,是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业,很多企业看着销售不错,账上却没钱、利润也不见了,一翻库存才发现: 一堆卖不动的旧货…...
Qt Http Server模块功能及架构
Qt Http Server 是 Qt 6.0 中引入的一个新模块,它提供了一个轻量级的 HTTP 服务器实现,主要用于构建基于 HTTP 的应用程序和服务。 功能介绍: 主要功能 HTTP服务器功能: 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...
自然语言处理——Transformer
自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效,它能挖掘数据中的时序信息以及语义信息,但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN,但是…...
关于 WASM:1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么? WebAssembly(WASM) 是一种能在现代浏览器中高效运行的二进制指令格式,它不是传统的编程语言,而是一种 低级字节码格式,可由高级语言(如 C、C、Rust&am…...
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...
HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力:训练时既扩散也回归,但推理时则扩散
前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说,在叠衣服的过程中,我会带着团队对比各种模型、方法、策略,毕竟针对各个场景始终寻找更优的解决方案,是我个人和我司「七月在线」的职责之一 且个人认为,…...
C++实现分布式网络通信框架RPC(2)——rpc发布端
有了上篇文章的项目的基本知识的了解,现在我们就开始构建项目。 目录 一、构建工程目录 二、本地服务发布成RPC服务 2.1理解RPC发布 2.2实现 三、Mprpc框架的基础类设计 3.1框架的初始化类 MprpcApplication 代码实现 3.2读取配置文件类 MprpcConfig 代码实现…...
