方案一

多行文本框接收到复制的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. 【363】python 相关小技巧

    1. 对列表进行乱序 通过 random.shuffle() 方法实现,直接对列表进行操作 >>> import random >>> a = list(range ...

  2. 讲一讲Servlet和JSP的关系

    Test.jsp在运行时首先被解析成一个java类Test_jsp.java,该类继承于org.apache.jasper.runtime.HtppJspBase类,而Http又是继承HttpServ ...

  3. jQuery+php实现二级联动

    public function liandong(){ $arr = Db::table("city")->where("pid=0")->sele ...

  4. 【原创】锐捷实现OSPF路由协议和NAT地址转换协议

    路由网络设计与实施 [锐捷设备实现OSPF路由协议与NAT地址转换] 说明:   本文是在多VLAN双星型交换网络的基础之上发展的.关于组建多VLAN双星型交换网络,请参阅: <思科和锐捷组建多 ...

  5. 用Delphi制作DLL

    一.开使你的第一个DLL专案  1.File->Close all->File->New﹝DLL﹞代码: //自动产生Code如下  library Project2;  //这有段 ...

  6. openstack常用命令

    共享镜像 glance member-create fa47923c-2d3b-4d71-80cf-a047ba3bf342 eb3913b9ae5f41b09f2632389a1958d8删除共享镜 ...

  7. opencv输出图片像素值

    需求:在控制台输出灰度图像的像素值 代码: #include <stdio.h> #include <iostream> #include <opencv2/core/c ...

  8. 获取镜像tag

    # curl -k https://k8s.gcr.io/v2/fluentd-elasticsearch/tags/list|jq .tags % Total % Received % Xferd ...

  9. vue 路由meta作用及在路由中添加props作用

    vue路由meta:有利于我们处理seo的东西,我们在html中加入meta标签,就是有利于处理seo的东西,搜索引擎 在路由中传参是通过/:id传参代码如下: import Login from ' ...

  10. 从源码安装Node

    [从源码安装Node] Nodejs官网未并提供i686架构的bin,为了在i686架构cpu下使用Nodejs,需要从源码编译. 1../configure 2.make 3.make instal ...