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);
                            }
                        }
                    }
                });
            })
        });
    }
    

      

  • 相关阅读:
    HTML5新特性之文件和二进制数据的操作
    HTML5本地存储之IndexedDB
    HTML5新标签之Canvas
    HTML5 Canvas实战之烟花效果
    Asp.NET core/net 5接口返回实体含有long/int64的属性序列后最后几位变为0的解决
    Aero for WTL application
    C++WTL基于MCI的音频播放器源码
    c++ 深拷贝,浅拷贝,赋值操作的调用情况
    发布一个生成按钮图片的工具 c#写的
    贴图:CImage VS Bitmap
  • 原文地址:https://www.cnblogs.com/guohu/p/9609437.html
Copyright © 2011-2022 走看看