电子商务网站建设需要的语言及特点6,哪个公司的网络最好用,seo关键词优化系统,淘宝网首页电脑版登录入口录入数据时#xff0c;有时候需要把excel中的数据一条条粘贴到页面中#xff0c;当数据量过多时#xff0c;这种操作很令人崩溃。本篇文章实现了从excel复制好多行数据后,可在页面粘贴的功能 具体实现代码
!DOCTYPE html
html langen
head… 录入数据时有时候需要把excel中的数据一条条粘贴到页面中当数据量过多时这种操作很令人崩溃。本篇文章实现了从excel复制好多行数据后,可在页面粘贴的功能 具体实现代码
!DOCTYPE html
html langen
head
meta charsetUTF-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
bodytextarea idtextarea/textareatable idmyTabletheadtrth姓名/thth年龄/thth职业/th/tr/theadtbodytrtd张三/tdtd30/tdtd程序员/td/trtrtd李四/tdtd28/tdtd设计师/td/tr/tbody/tablescriptdocument.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效果图
