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 ...
随机推荐
- jenkins com.jcraft.jsch.JSchException: Auth cancel
jenkins构建时报如下错误: 首先去系统管理--->系统设置上看看SCP插件中的用户名和密码是否正确
- vue项目动态控制数据变动时箭头样式
html代码 <div class="top_precent"> <span :class="{arrow:numPrecent<0}" ...
- spring boot 的服务监控
- windows 允许空密码登陆
HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Lsa 这个注册表键值下的limitblankpassworduse项 修改为0或者1
- qt 中的基本知识
1. 由 .ui 文件生成界面头文件: uic -o ui_dialog.h dialog.ui 2. 在工程目录下生成与平台无关的工程文件 : qmake -project 3. 生成与平台相关的 ...
- ssh架构之hibernate(一)简单使用hibernate完成CRUD
1.Hibernate简介 Hibernate是一个开放源代码的对象关系映射(ORM)框架,它对JDBC进行了非常轻量级的对象封装,它将POJO与数据库表建立映射关系,是一个全自动的orm框架,h ...
- 理解JVM2 栈内存,方法区,堆内存
堆,方法区,栈的关系 分配最大堆内存-Xmx32m class SimpleHeap(val id: Int){ fun show() = println("My id is $id&quo ...
- 1.3、CDH 搭建Hadoop在安装之前(端口)
端口 Cloudera Manager,CDH组件,托管服务和第三方组件使用下表中列出的端口.在部署Cloudera Manager,CDH和托管服务以及第三方组件之前,请确保在每个系统上打开这些端口 ...
- windows环境安装zabbix客户端
安装windows版zabbix客户端 一.下载客户端 在数据盘新建一个zabbix_agent目录 浏览器打开 https://www.zabbix.com/download_agents 选择”z ...
- Java方法的重载和重写
重载与重写对比: 重载: 权限修饰符(public private 默认):无关 方法名:重载的两个方法的方法名必须相同 形参的个数不同 形参的类型不同 三者至少满足一个 返回值类型: 重载与返回值 ...