excel数据复制到html表格<textarea>中
方案一
多行文本框接收到复制的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>中的更多相关文章
- SQL把表中的数据复制到另一个数据库中
1 删除整张表的数据,并还原自增长值TRUNCATE TABLE TbWeixinActivity 2 3张表左连接select a.ID,c.Name,b.nickname,a.CreateDate ...
- SQL数据库中把一个表中的数据复制到另一个表中
1.如果是整个表复制表达如下: insert into table1 select * from table2 2.如果是有选择性的复制数据表达如下: insert into table1(colu ...
- 如何把EXCEL数据导入到SQL SERVER数据库中 (转)
转:http://blog.csdn.net/jjp837661103/article/details/13509889 在我们完成一个项目开发之后,通常我们需要把客户的很多数据导入到数据库中,面对大 ...
- SqlServer表EXCEL数据复制的另一种方法
一个.SqlServer表中的数据复制到excel 1.新建查询,用sql语句把表数据读出来 2.然后,选择数据,右键.复制(也能够点击连同标题复制),拷贝到记事本中(不然会乱码) 3.然后再把记事本 ...
- SQL SERVER 将一个数据库中的表和数据复制到另一个数据库中
第一种情况:将A数据库.dbo.A表的数据追加到B数据库.dbo.B表中 (条件:此时B数据库中已创建好了B表) insert into B数据库.dbo.B表 select * from A数据库. ...
- SQL将一个数据库中的数据复制到另一个数据库中
复制表结构 首先,打开并连接Sql Server,在源数据库Source_db(源数据库名称)上右键,然后依次点击"编写表脚本为"→"CREATE到"→&quo ...
- SQL中如何将一个表中的某一列的数据复制到另一个表中的某一列里
表一: SPRD PRD_NO SPC 001 NULL 002 NULL 003 NULL ... ...
- mysql 将一个表中的数据复制到另一个表中,sql语句
1.表结构相同的表,且在同一数据库(如,table1,table2) Sql :insert into table1 select * from table2 (完全复制) insert into t ...
- Sql Server两个数据库中有一张表的结构一样,怎么快速将一张表中的数据复制到另一个表中
1,下面这句会把表2数据删除,然后把表1复制到表一,两表内容一样 SELECT * into 表2 FROM 表1 2,这句只追加,不删除表2的数据 insert into 表1 select * f ...
随机推荐
- 【363】python 相关小技巧
1. 对列表进行乱序 通过 random.shuffle() 方法实现,直接对列表进行操作 >>> import random >>> a = list(range ...
- 讲一讲Servlet和JSP的关系
Test.jsp在运行时首先被解析成一个java类Test_jsp.java,该类继承于org.apache.jasper.runtime.HtppJspBase类,而Http又是继承HttpServ ...
- jQuery+php实现二级联动
public function liandong(){ $arr = Db::table("city")->where("pid=0")->sele ...
- 【原创】锐捷实现OSPF路由协议和NAT地址转换协议
路由网络设计与实施 [锐捷设备实现OSPF路由协议与NAT地址转换] 说明: 本文是在多VLAN双星型交换网络的基础之上发展的.关于组建多VLAN双星型交换网络,请参阅: <思科和锐捷组建多 ...
- 用Delphi制作DLL
一.开使你的第一个DLL专案 1.File->Close all->File->New﹝DLL﹞代码: //自动产生Code如下 library Project2; //这有段 ...
- openstack常用命令
共享镜像 glance member-create fa47923c-2d3b-4d71-80cf-a047ba3bf342 eb3913b9ae5f41b09f2632389a1958d8删除共享镜 ...
- opencv输出图片像素值
需求:在控制台输出灰度图像的像素值 代码: #include <stdio.h> #include <iostream> #include <opencv2/core/c ...
- 获取镜像tag
# curl -k https://k8s.gcr.io/v2/fluentd-elasticsearch/tags/list|jq .tags % Total % Received % Xferd ...
- vue 路由meta作用及在路由中添加props作用
vue路由meta:有利于我们处理seo的东西,我们在html中加入meta标签,就是有利于处理seo的东西,搜索引擎 在路由中传参是通过/:id传参代码如下: import Login from ' ...
- 从源码安装Node
[从源码安装Node] Nodejs官网未并提供i686架构的bin,为了在i686架构cpu下使用Nodejs,需要从源码编译. 1../configure 2.make 3.make instal ...