網(wǎng)站引導(dǎo)動(dòng)畫(huà)怎么做的邯鄲百度推廣公司
錄入數(shù)據(jù)時(shí)，有時(shí)候需要把excel中的數(shù)據(jù)一條條粘貼到頁(yè)面中，當(dāng)數(shù)據(jù)量過(guò)多時(shí)，這種操作很令人崩潰。本篇文章實(shí)現(xiàn)了從excel復(fù)制好多行數(shù)據(jù)后,可在頁(yè)面粘貼的功能
具體實(shí)現(xiàn)代碼
<!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>職業(yè)</th></tr></thead><tbody><tr><td>張三</td><td>30</td><td>程序員</td></tr><tr><td>李四</td><td>28</td><td>設(shè)計(jì)師</td></tr></tbody></table><script>document.addEventListener('DOMContentLoaded', function() {const inputElement = document.getElementById('textarea');function handlePasteEvent(event) {// event.preventDefault(); // 可選：阻止默認(rèn)粘貼行為// 獲取粘貼板數(shù)據(jù)const clipboardData = event.clipboardData || window.clipboardData;const pastedData = clipboardData.getData('Text');// 初始化用于存儲(chǔ)解析后的數(shù)據(jù)的數(shù)組let arr = [];try {arr = pastedData.split('\n').filter(item => item !== '') // 兼容Excel行末\n，防止出現(xià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; // 在遇到異常時(shí)終止處理}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; // 表格的列數(shù)// 創(chuàng)建一個(gè)文檔片段，用于批量添加新行到DOM中，減少重繪次數(shù)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); // 最后將整個(gè)文檔片段一次性添加到表格中}// 添加粘貼事件監(jiān)聽(tīng)器inputElement.addEventListener('paste', handlePasteEvent);});</script>
</body>
</html>
效果圖
