zoukankan      html  css  js  c++  java
  • excel数据复制到html表格<textarea>中

    方案一

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

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

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

      $(function () {
                $("textarea").on("change", function () {
                    var str = $(this).val();
                    var rowStrArray = str.split("
    ");
                    var rows = [];
                    for (var i = 0; i < rowStrArray.length; i++) {
                        var row = [];
                        var tdStrArray = rowStrArray[i].split('	');
                        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("
    ");
            var rows = [];
            for (var i = 0; i < rowStrArray.length; i++) {
                var row = [];
                var tdStrArray = rowStrArray[i].split('	');
                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);
                            }
                        }
                    }
                });
            })
        });
    }
    

      

  • 相关阅读:
    【爬虫】对新笔趣阁小说进行爬取,保存和下载
    第二次学习记录(Python)
    大厂Redis高并发场景设计,面试问的都在这!
    自定义注解!绝对是程序员装逼的利器!!
    利用Python将多张图片合成视频
    理解Python闭包,这应该是最好的例子
    爬取某知名网站的数据
    用Python爬取日向、樱坂成员blog中的JPG文件的url并将其下载到本地
    爬虫入门经典(二十二) | 破解base64加密之爬取安居客
    现实世界的Windows Azure:采访AppPoint的技术总监Rajesekar Shanmugam
  • 原文地址:https://www.cnblogs.com/guohu/p/9609437.html
Copyright © 2011-2022 走看看