方案一

多行文本框接收到复制的excel值后,在文本框的chage事件中,将excel内容分割到二维数组中,然后填充到html的表格的input或textarea中。

数据格式: 单元格复制后的数据格式为"设备\t缺陷类型\r\n水压堵阀\t母材裂纹"。

注释:单元格之间通过"\t"分隔,行间通过"\r\n"分隔。数据必须粘贴到<textarea>多文本框中,如果是<input>控件换行符"\r\n"会被删除掉。表格中要使用<textarea>接收数据,

  $(function () {
$("textarea").on("change", function () {
var str = $(this).val();
var rowStrArray = str.split("\n");
var rows = [];
for (var i = 0; i < rowStrArray.length; i++) {
var row = [];
var tdStrArray = rowStrArray[i].split('\t');
for (var j = 0; j < tdStrArray.length; j++) {
row.push(tdStrArray[j]);
}
rows.push(row);
} var startTr = $(this).parents("tr:first");
var startTd = $(this).parents("td:first");
var trIndex = -1;
var tdIndex = -1;
$("tr").each(function (i, tr) {
if (tr == startTr[0]) {
trIndex = i;
} $(tr).find("td").each(function (j, td) {
if (td == startTd[0]) {
tdIndex = j;
} if (trIndex != -1 && tdIndex != -1 && i >= trIndex && j >= tdIndex) {
var rowsIndex = i - trIndex;
if (rowsIndex < rows.length) {
var row = rows[rowsIndex];
var rowIndex = j - tdIndex;
if (rowIndex < row.length) {
var val = rows[rowsIndex][rowIndex];
$(td).find("textarea").val(val);
}
}
}
});
})
});
});

  

方案二:优化方案

粘贴事件发生的时候,获取剪切板的内容,将复制的excel内容分割到二维数组中,然后填充到html的表格的input或textarea中。

var CopyExcel = function (tableId) {
$("#" + tableId).find("input,textarea").on("paste", function (e) {
var pastedText = undefined;
if (window.clipboardData && window.clipboardData.getData) {
// IE
pastedText = window.clipboardData.getData('Text');
} else {
//e.clipboardData.getData('text/plain');
pastedText = e.originalEvent.clipboardData.getData('Text');
}
//阻止粘贴事件的默认行为
e.preventDefault();
var str = pastedText;
var rowStrArray = str.split("\r\n");
var rows = [];
for (var i = 0; i < rowStrArray.length; i++) {
var row = [];
var tdStrArray = rowStrArray[i].split('\t');
for (var j = 0; j < tdStrArray.length; j++) {
row.push(tdStrArray[j]);
}
rows.push(row);
} var startTr = $(this).parents("tr:first");
var startTd = $(this).parents("td:first");
var trIndex = -1;
var tdIndex = -1;
$("tr").each(function (i, tr) {
if (tr == startTr[0]) {
trIndex = i;
} $(tr).find("td").each(function (j, td) {
if (td == startTd[0]) {
tdIndex = j;
} if (trIndex != -1 && tdIndex != -1 && i >= trIndex && j >= tdIndex) {
var rowsIndex = i - trIndex;
if (rowsIndex < rows.length) {
var row = rows[rowsIndex];
var rowIndex = j - tdIndex;
if (rowIndex < row.length) {
var val = rows[rowsIndex][rowIndex];
$(td).find("input,textarea").val(val);
}
}
}
});
})
});
}

  

excel数据复制到html表格<textarea>中的更多相关文章

  1. SQL把表中的数据复制到另一个数据库中

    1 删除整张表的数据,并还原自增长值TRUNCATE TABLE TbWeixinActivity 2 3张表左连接select a.ID,c.Name,b.nickname,a.CreateDate ...

  2. SQL数据库中把一个表中的数据复制到另一个表中

    1.如果是整个表复制表达如下: insert into table1 select  * from table2 2.如果是有选择性的复制数据表达如下: insert into table1(colu ...

  3. 如何把EXCEL数据导入到SQL SERVER数据库中 (转)

    转:http://blog.csdn.net/jjp837661103/article/details/13509889 在我们完成一个项目开发之后,通常我们需要把客户的很多数据导入到数据库中,面对大 ...

  4. SqlServer表EXCEL数据复制的另一种方法

    一个.SqlServer表中的数据复制到excel 1.新建查询,用sql语句把表数据读出来 2.然后,选择数据,右键.复制(也能够点击连同标题复制),拷贝到记事本中(不然会乱码) 3.然后再把记事本 ...

  5. SQL SERVER 将一个数据库中的表和数据复制到另一个数据库中

    第一种情况:将A数据库.dbo.A表的数据追加到B数据库.dbo.B表中 (条件:此时B数据库中已创建好了B表) insert into B数据库.dbo.B表 select * from A数据库. ...

  6. SQL将一个数据库中的数据复制到另一个数据库中

    复制表结构 首先,打开并连接Sql Server,在源数据库Source_db(源数据库名称)上右键,然后依次点击"编写表脚本为"→"CREATE到"→&quo ...

  7. SQL中如何将一个表中的某一列的数据复制到另一个表中的某一列里

    表一: SPRD PRD_NO      SPC 001                NULL 002               NULL 003               NULL ...   ...

  8. mysql 将一个表中的数据复制到另一个表中,sql语句

    1.表结构相同的表,且在同一数据库(如,table1,table2) Sql :insert into table1 select * from table2 (完全复制) insert into t ...

  9. Sql Server两个数据库中有一张表的结构一样,怎么快速将一张表中的数据复制到另一个表中

    1,下面这句会把表2数据删除,然后把表1复制到表一,两表内容一样 SELECT * into 表2 FROM 表1 2,这句只追加,不删除表2的数据 insert into 表1 select * f ...

随机推荐

  1. 【364】SVM 通过 sklearn 可视化实现

    先看下效果图: # 先调入需要的模块 import numpy as np import matplotlib.pyplot as plt from sklearn import svm import ...

  2. 24.类的加载机制和反射.md

    目录 1类的加载连接和初始化 1.1类的加载过程 1.2类的加载器 1.2.1类的加载机制 1类的加载连接和初始化 1.1类的加载过程 类的加载过程简单为分为三步:加载->连接->初始化 ...

  3. arcgis_SDE安装步骤

    弄了将近一个星期的Oracle和ArcSDE终于让我给弄好了!下面把过程跟大家分享一下: 首先是Oracle10gR2的安装,在Oracle的官方网站上可以下到Oracle10gR2的安装程序,安装过 ...

  4. eclipse git 删除内容

  5. css3边框与背景

    一.css3边框 1.border-image 边框 border-image: url(xxx.png) number stretch 很好理解就是拉伸,有多长拉多长. repeat (和4角上 同 ...

  6. Linux初学时的一些常用命令(1)

    查看帮助: man 命令   退出帮助目录:   q 切换目录:cd cd 目录 cd 目录/目录 cd ..  :上一级目录 cd /  :根目录cd ~ :回家  创建目录和删除目录   mkdi ...

  7. vue 异步请求

    摘自 ECMAScript 6 简介: 大家习惯将 ECMAScript 6.0 简称为 ES6,它是 Javascript 语言的下一代标准,它的目标,是使得 Javascript 语言可以用来编写 ...

  8. kotlin函数api

    原 Kotlin学习(4)Lambda 2017年09月26日 21:00:03 gwt0425 阅读数:551   记住Lambda的本质,还是一个对象.和JS,Python等不同的是,Kotlin ...

  9. 解题(StringTongPei--字符串匹配(动态规划))

    题目描述 问题描述:在计算机中,通配符一种特殊语法,广泛应用于文件搜索.数据库.正则表达式等领域.现要求各位实现字符串通配符的算法.要求:实现如下2个通配符:*:匹配0个或以上的字符(字符由英文字母和 ...

  10. Java 管道PipedInputStream PipedOutStream PipedReader PipedWriter

    java中的管道流(pipeStream)是一种特殊的流,用于在不同线程间直接传送数据.一个线程发送数据到输出管道,另外一个线程从输入管道中读取数据.通过使用管道,实现不同线程间的通信,而不必借助类似 ...