Javascript 解决IE8不支持filter、map的方法,实现IE8内Table中Excel数据粘贴


在脚本开头添加如下代码

 1 //filter
 2 if (!Array.prototype.filter){
 3     Array.prototype.filter = function(fun){
 4         if (this === void 0 || this === null)
 5           throw new TypeError();
 6 
 7         var t = Object(this);
 8         var len = t.length >>> 0;
 9         if (typeof fun !== "function")
10           throw new TypeError();
11 
12         var res = [];
13         var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
14         for (var i = 0; i < len; i++){
15             if (i in t){
16                 var val = t[i];
17                 if (fun.call(thisArg, val, i, t))
18                   res.push(val);
19             }
20         }
21     return res;
22   };
23 }
24 
25 //map
26 if (!Array.prototype.map) {
27     Array.prototype.map = function(callback, thisArg) {
28         var T, A, k;
29         if (this == null) {
30             throw new TypeError(" this is null or not defined");
31         }
32         var O = Object(this);
33         var len = O.length >>> 0;
34         if (typeof callback !== "function") {
35             throw new TypeError(callback + " is not a function");
36         }
37         if (thisArg) {
38             T = thisArg;
39         }
40         A = new Array(len);
41         k = 0;
42         while(k < len) {
43             var kValue, mappedValue;
44             if (k in O) {
45                 kValue = O[ k ];
46                 mappedValue = callback.call(T, kValue, k, O);
47                 A[ k ] = mappedValue;
48             }
49             k++;
50         }
51         return A;
52     };
53 }
View Code

在实现HTML table中粘贴excel复制数据时发现chrome正常,但是IE8未无法实现这一功能,通过排查发现IE8中并不支持filter、map等方法

如下是实际应用

  1 <html>
  2  <head>
  3   <title>MyHtml.html</title>
  4   <script src="http://code.jquery.com/jquery-1.4.1.min.js" type="text/javascript"></script>
  5   <script type="text/javascript">
  6     $(document).ready(function () {
  7         $('#tablepaste').bind('paste', function (e) {
  8             //消除默认粘贴
  9             if (document.all)   //判断IE浏览器
 10                 window.event.returnValue = false;
 11             else event.preventDefault();
 12             //获取粘贴板数据
 13             var data = null;
 14             var clipboardData = window.clipboardData || e.originalEvent.clipboardData; // IE || chrome  
 15             data = clipboardData.getData('Text');
 16             data.replace(/\t/g, '\\t').replace(/\n/g, '\\n'); //data转码
 17             
 18             //兼容IE8
 19             if (!Array.prototype.filter){
 20                 Array.prototype.filter = function(fun){
 21                     if (this === void 0 || this === null)
 22                       throw new TypeError();
 23 
 24                     var t = Object(this);
 25                     var len = t.length >>> 0;
 26                     if (typeof fun !== "function")
 27                       throw new TypeError();
 28 
 29                     var res = [];
 30                     var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
 31                     for (var i = 0; i < len; i++){
 32                         if (i in t){
 33                             var val = t[i];
 34                             if (fun.call(thisArg, val, i, t))
 35                               res.push(val);
 36                         }
 37                     }
 38                 return res;
 39               };
 40             }
 41             if (!Array.prototype.map) {
 42                 Array.prototype.map = function(callback, thisArg) {
 43                     var T, A, k;
 44                     if (this == null) {
 45                         throw new TypeError(" this is null or not defined");
 46                     }
 47                     var O = Object(this);
 48                     var len = O.length >>> 0;
 49                     if (typeof callback !== "function") {
 50                         throw new TypeError(callback + " is not a function");
 51                     }
 52                     if (thisArg) {
 53                         T = thisArg;
 54                     }
 55                     A = new Array(len);
 56                     k = 0;
 57                     while(k < len) {
 58                         var kValue, mappedValue;
 59                         if (k in O) {
 60                             kValue = O[ k ];
 61                             mappedValue = callback.call(T, kValue, k, O);
 62                             A[ k ] = mappedValue;
 63                         }
 64                         k++;
 65                     }
 66                     return A;
 67                 };
 68             }
 69             
 70             //解析数据
 71             var arr = data.split('\n')
 72             .filter(function (item) {    //兼容Excel行末\n,防止出现多余空行
 73                 return (item !== "");
 74             }).map(function (item) {
 75                 return item.split("\t");
 76             });
 77             //输出至网页表格
 78             var tab = this;  //表格DOM
 79             var td = $(e.target).parents('td');
 80             var startRow = td.parents('tr')[0].rowIndex;
 81             var startCell = td[0].cellIndex;
 82             var rows = tab.rows.length;  //总行数
 83             for (var i = 0; i < arr.length && startRow + i < rows; i++) {
 84                 var cells = tab.rows[startRow + i].cells.length;  //该行总列数
 85                 for (var j = 0; j < arr[i].length && startCell + j < cells; j++) {
 86                     var cell = tab.rows[startRow + i].cells[startCell + j];
 87                     $(cell).find(':text').val(arr[i][j]);  //找到cell下的input:text,设置value
 88                 }
 89             }
 90         });
 91     });
 92  </script>
 93  
 94  </head>
 95  
 96  <body>
 97     <table id="tablepaste">
 98         <thead>
 99             <tr>
100                 <th width="50px"><span>序号</span></th>
101                 <th width="150px"><span>物料号</span></th>
102                 <th width="150px"><span>产品名称</span></th>
103                 <th width="70px"><span>数量</span></th>
104                 <th width="90px"><span>单价</span></th>
105                 <th width="90px"><span>交货期</span></th>
106                 <th width="90px"><span>质保期</span></th>
107                 <th width="150px"><span>产品类型</span></th>
108             </tr>
109         </thead>
110         <tbody>
111                 <tr>
112                     <td><span class="lineNo">1</span></td>
113                     <td><input type="text"  /></td>
114                     <td><input type="text" /></td>
115                     <td><input type="text"  /></td>
116                     <td><input type="text" /></td>
117                     <td><input type="text"  /></td>
118                     <td><input type="text" /></td>
119                     <td><input type="text" /></td>
120                 </tr>
121                 <tr>
122                     <td><span class="lineNo">2</span></td>
123                     <td><input type="text"  /></td>
124                     <td><input type="text" /></td>
125                     <td><input type="text"  /></td>
126                     <td><input type="text" /></td>
127                     <td><input type="text"  /></td>
128                     <td><input type="text" /></td>
129                     <td><input type="text" /></td>
130                 </tr>                    
131                 <tr>
132                     <td><span class="lineNo">3</span></td>
133                     <td><input type="text"  /></td>
134                     <td><input type="text" /></td>
135                     <td><input type="text"  /></td>
136                     <td><input type="text" /></td>
137                     <td><input type="text"  /></td>
138                     <td><input type="text" /></td>
139                     <td><input type="text" /></td>
140                 </tr>                    
141                 <tr>
142                     <td><span class="lineNo">4</span></td>
143                     <td><input type="text"  /></td>
144                     <td><input type="text" /></td>
145                     <td><input type="text"  /></td>
146                     <td><input type="text" /></td>
147                     <td><input type="text"  /></td>
148                     <td><input type="text" /></td>
149                     <td><input type="text" /></td>
150                 </tr>
151         </tbody>
152     </table>
153  </body>
154 </html>
View Code


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM