首页 > 代码库 > JS学习大作业-Excel
JS学习大作业-Excel
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>"Excel"</title> 6 <style type="text/css"> 7 img{ 8 pointer-events: none; 9 } 10 #maintable { 11 table-layout: fixed; 12 border: #999999 1px solid; 13 border-collapse: collapse; 14 user-select: none; 15 } 16 #maintable td, #maintable th { 17 box-sizing: border-box; 18 user-select: none; 19 height: 20px; 20 width: 65px; 21 } 22 #maintable td { 23 border: #D4D4D4 1px solid; 24 } 25 #maintable th { 26 border: #999999 1px solid; 27 background-color: #E6E6E6; 28 font-size: 13px; 29 overflow: hidden; 30 } 31 #maintable .rowth { 32 width: 25px; 33 } 34 #maintable .colth { 35 height: 30px; 36 } 37 .show { 38 display: block; 39 } 40 .hide { 41 display: none; 42 } 43 #contextmenu { 44 position: fixed; 45 width: 120px; 46 border: #D4D4D4 1px solid; 47 background-color: white; 48 } 49 #contextmenu div { 50 color: #333333; 51 padding: 5px 20px; 52 width: 120px; 53 box-sizing: border-box; 54 background-color: white; 55 } 56 #contextmenu div:hover { 57 background: #E6E6E6; 58 } 59 #resizeline { 60 pointer-events: none; 61 position: absolute; 62 border-left: dashed 1px red; 63 } 64 #selectdiv { 65 border: green 2px solid; 66 box-sizing: border-box; 67 background-color: rgba(200,200,200,0.5); 68 position: absolute; 69 pointer-events: none; 70 } 71 72 </style> 73 <script type="text/javascript"> 74 window.addEventListener("load", function () { 75 new ExcelTable("maintable", 3, 20, 20, 300, 5); 76 }); 77 function ExcelTable(id, span, initRow, initCol, maxWidthOrHeight, minWidthOrHeight) { 78 this.span = (undefined == span) ? 3 : span; 79 this.initRow = initRow; 80 this.initCol = initCol; 81 this.maxWidthOrHeight = (undefined == maxWidthOrHeight) ? 300 : maxWidthOrHeight; 82 this.minWidthOrHeight = (undefined == minWidthOrHeight) ? 5 : minWidthOrHeight; 83 this.curRow = 0; 84 this.curCol = 0;// colindex of mouseEvents.target 85 this.resizeElem = null;// resize operator elem 86 this.resizeFlag = false; 87 this.downOffset = 0; //when resize,movedownEvent starting position 88 this.upOffset = 0; //when resize,moveupEvent ending position 89 this.selSrcElem = null;//when select,movedownEvent.target 90 this.selDesElem = null; //when select,moveupEvent.target 91 this.selFlag = false; 92 this.table = document.getElementById(id); 93 this.allImg=null; 94 this.resizeLine = null; 95 this.contextMenu = null; 96 this.selectDiv = null; 97 var self = this; 98 /*this.handler1 = function (e) { 99 //var mouseMoveElement = this;//***此时回调的this是触发此事件的元素 100 self.documentMouseMoveFun(e); 101 };*/ 102 this.handler2 = function (e) { 103 //var mouseMoveElement = this;//***此时回调的this是触发此事件的元素 104 self.documentMouseUpFun(e); 105 }; 106 //other method 107 this.handler1 = (function (me) { 108 return function (e) { 109 me.documentMouseMoveFun(e); 110 }; 111 })(this); 112 this.init(); 113 } 114 ExcelTable.getOffSet = function (obj) { 115 var p = new Object(); 116 p.x = obj.offsetLeft; 117 p.y = obj.offsetTop; 118 obj = obj.offsetParent; 119 while (obj) { 120 p.x += obj.offsetLeft; 121 p.y += obj.offsetTop; 122 obj = obj.offsetParent; 123 } 124 return p; 125 } 126 ExcelTable.calcColNum = function (num) { 127 var colNum = []; 128 var letters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]; 129 colNum.push(letters[num % letters.length]); 130 num = Math.floor(num / letters.length); 131 while (num) { 132 --num; 133 colNum.push(letters[num % letters.length]); 134 num = Math.floor(num / letters.length); 135 } 136 return colNum.reverse().join(""); 137 } 138 ExcelTable.prototype.insertRowOrCol = function () { 139 if (this.curCol == 0) { 140 this.insertRow(); 141 } 142 else if (this.curRow == 0) { 143 this.insertCol(); 144 } 145 } 146 ExcelTable.prototype.insertRow = function () { 147 //real time get latest rowsNum,colsNum 148 var rowsNum = this.table.rows.length; 149 var colsNum = this.table.rows.item(0).cells.length; 150 var row = this.table.insertRow(this.curRow); 151 var th = document.createElement("th");//first insert a th 152 th.className = "rowth"; 153 row.appendChild(th); 154 for (var i = 1; i < colsNum; ++i) { 155 row.insertCell(i); 156 } 157 this.refreshRowSerialNumber(); 158 } 159 ExcelTable.prototype.refreshRowSerialNumber = function () { 160 //real time get latest rowsNum,colsNum 161 var rowsNum = this.table.rows.length; 162 for (var j = 1; j < rowsNum; ++j) { 163 if (j > 0) { 164 this.table.rows[j].cells[0].innerText = j; 165 } 166 } 167 } 168 ExcelTable.prototype.insertCol = function () { 169 //real time get latest rowsNum,colsNum 170 var rowsNum = this.table.rows.length; 171 var colsNum = this.table.rows.item(0).cells.length; 172 var th = document.createElement("th");//first insert a th 173 th.className = "colth"; 174 this.table.rows[0].insertBefore(th, this.table.rows[0].childNodes[this.curCol]); 175 for (var i = 1; i < rowsNum; ++i) { 176 this.table.rows[i].insertCell(this.curCol); 177 } 178 this.refreshColSerialNumber(); 179 } 180 ExcelTable.prototype.refreshColSerialNumber = function () { 181 //real time get latest rowsNum,colsNum 182 var colsNum = this.table.rows.item(0).cells.length; 183 for (var j = 1; j < colsNum; ++j) { 184 this.table.rows[0].cells[j].innerText = ExcelTable.calcColNum(j - 1); 185 } 186 } 187 ExcelTable.prototype.deleteRowOrCol = function () { 188 if (this.curCol == 0) { 189 this.deleteRow(); 190 } 191 else if (this.curRow == 0) { 192 this.deleteCol(); 193 } 194 } 195 ExcelTable.prototype.deleteRow = function () { 196 //real time get latest rowsNum,colsNum 197 var rowsNum = this.table.rows.length; 198 var colsNum = this.table.rows.item(0).cells.length; 199 this.table.deleteRow(this.curRow); 200 this.refreshRowSerialNumber(); 201 } 202 ExcelTable.prototype.deleteCol = function () { 203 //real time get latest rowsNum,colsNum 204 var rowsNum = this.table.rows.length; 205 var colsNum = this.table.rows.item(0).cells.length; 206 for (var i = 0; i < rowsNum; ++i) { 207 this.table.rows[i].deleteCell(this.curCol); 208 } 209 this.refreshColSerialNumber(); 210 } 211 ExcelTable.prototype.showContextMenu = function (offx, offy) { 212 this.contextMenu.style.left = offx + "px"; 213 this.contextMenu.style.top = offy + "px"; 214 this.contextMenu.className = "show"; 215 } 216 ExcelTable.prototype.hideContextMenu = function () { 217 this.contextMenu.className = "hide"; 218 } 219 ExcelTable.prototype.showResizeLine = function (offx, offy) { 220 this.resizeLine.style.left = offx + "px"; 221 this.resizeLine.style.top = offy + "px"; 222 this.resizeLine.className = "show"; 223 } 224 ExcelTable.prototype.hideResizeLine = function () { 225 this.resizeLine.className = "hide"; 226 } 227 ExcelTable.prototype.contextMenuFun = function (e) { 228 this.curRow = e.target.parentElement.rowIndex; 229 this.curCol = e.target.cellIndex; 230 if (this.curRow == 0 || this.curCol == 0) { 231 e.preventDefault(); 232 var offx = e.clientX;//==e.screenX 233 var offy = e.clientY;//!=e.screenY 234 this.showContextMenu(offx, offy); 235 } 236 } 237 ExcelTable.prototype.showSelectDiv = function (offx, offy, width, height) { 238 this.selectDiv.className = "show"; 239 this.selectDiv.style.left = offx + "px"; 240 this.selectDiv.style.top = offy + "px"; 241 this.selectDiv.style.width = width + "px"; 242 this.selectDiv.style.height = height + "px"; 243 } 244 ExcelTable.prototype.hideSelectDiv = function () { 245 this.selectDiv.className = "hide"; 246 } 247 ExcelTable.prototype.documentAddOrRemoveMouseMoveEvents = function (add) { 248 /*var self = this; 249 var handler = function (e) { 250 self.documentMouseMoveFun(e); //keynote:handler can‘t use "this",becauese "this" is the context variable that refers to the element that fired the event 251 };*/ 252 if (add) { 253 document.addEventListener(‘mousemove‘, this.handler1, false); 254 } 255 else { 256 document.removeEventListener(‘mousemove‘, this.handler1, false); 257 } 258 } 259 ExcelTable.prototype.documentAddOrRemoveMouseUpEvents = function (add) { 260 /*var self = this; 261 var handler = function (e) { 262 self.documentMouseUpFun(e); 263 };*/ 264 if (add) { 265 document.addEventListener(‘mouseup‘, this.handler2, false); 266 } 267 else { 268 document.removeEventListener(‘mouseup‘, this.handler2, false); 269 } 270 } 271 ExcelTable.prototype.documentMouseMoveFun = function (e) { 272 this.documentMouseMoveResizeFun(e); 273 } 274 ExcelTable.prototype.documentMouseUpFun = function (e) { 275 if (this.resizeFlag) { 276 this.documentMouseUpResizeFun(e); 277 } 278 this.documentMouseUpSelectFun(e); 279 } 280 ExcelTable.prototype.documentMouseMoveResizeFun = function (e) { 281 if (this.curRow == 0 && this.curCol != 0) {//resize column width 282 //The maximum width of the resizeElem is not more than 300px, and the minimum is no less than 5px; 283 if ((e.clientX - ExcelTable.getOffSet(this.resizeElem).x) <= this.maxWidthOrHeight && (e.clientX - ExcelTable.getOffSet(this.resizeElem).x) >= this.minWidthOrHeight) { 284 this.resizeLine.style.left = e.clientX + ‘px‘; 285 this.upOffset = e.clientX; 286 } else if ((e.clientX - ExcelTable.getOffSet(this.resizeElem).x) > this.maxWidthOrHeight) { 287 this.upOffset = ExcelTable.getOffSet(this.resizeElem).x + this.maxWidthOrHeight; 288 } else { 289 this.upOffset = ExcelTable.getOffSet(this.resizeElem).x + this.minWidthOrHeight; 290 } 291 } 292 else if (this.curCol == 0 && this.curRow != 0) {//resize row height 293 //The maximum height of the resizeElem is not more than 300px, and the minimum is no less than 5px; 294 if ((e.clientY - ExcelTable.getOffSet(this.resizeElem).y) <= this.maxWidthOrHeight && (e.clientY - ExcelTable.getOffSet(this.resizeElem).y) >= this.minWidthOrHeight) { //最大不超过300px,最小不小于5px; 295 this.resizeLine.style.top = e.clientY + ‘px‘; 296 this.upOffset = e.clientY; 297 } else if ((e.clientY - ExcelTable.getOffSet(this.resizeElem).y) > this.maxWidthOrHeight) { 298 this.upOffset = ExcelTable.getOffSet(this.resizeElem).y + this.maxWidthOrHeight; 299 } else { 300 this.upOffset = ExcelTable.getOffSet(this.resizeElem).y + this.minWidthOrHeight; 301 } 302 } 303 } 304 ExcelTable.prototype.documentMouseUpResizeFun = function (e) { 305 if (this.curRow == 0 && this.curCol != 0) {//resize column width 306 this.resizeLine.className = "hide"; 307 var w = this.resizeElem.offsetWidth + this.upOffset - this.downOffset; 308 //Loop to resize width 309 var trs = this.table.rows; 310 for (var i = 0; i < trs.length; ++i) { 311 trs[i].cells[this.resizeElem.cellIndex].style.width = w + ‘px‘; 312 } 313 } 314 else if (this.curCol == 0 && this.curRow != 0) {//resize row height 315 this.resizeLine.className = "hide"; 316 var h = this.resizeElem.offsetHeight + this.upOffset - this.downOffset; 317 //Loop to resize height 318 var tr = this.resizeElem.parentElement; 319 for (var i = 0; i < tr.cells.length; ++i) { 320 //must use next two lines to change height 321 tr.cells[i].style.height = h + ‘px‘; 322 tr.cells[i].style.lineHeight = h + ‘px‘; 323 } 324 } 325 this.resizeFlag = false; 326 this.table.style.cursor = "default"; 327 this.resizeElem = null; 328 this.documentAddOrRemoveMouseMoveEvents(false); 329 this.documentAddOrRemoveMouseUpEvents(false); 330 } 331 ExcelTable.prototype.documentClickFun = function (e) { 332 this.hideContextMenu(); 333 } 334 ExcelTable.prototype.tableMouseMoveFun = function (e) { 335 if (!this.resizeFlag) {//when event of documentMouseMove occur,tableMouseMove also occur;so make a distinction 336 this.tableMouseMoveResizeFun(e); 337 } 338 if (this.selFlag) { 339 this.tableMouseMoveSelectFun(e); 340 } 341 } 342 ExcelTable.prototype.tableMouseDownFun = function (e) { 343 // deal with resize 344 if (this.resizeElem != null) { 345 this.tableMouseDownResizeFun(e); 346 } 347 else { 348 //deal with selection 349 this.tableMouseDownSelectFun(e); 350 } 351 } 352 353 ExcelTable.prototype.tableMouseMoveResizeFun = function (e) { 354 this.curRow = e.target.parentElement.rowIndex; 355 this.curCol = e.target.cellIndex; 356 this.table.style.cursor = "default"; 357 this.resizeElem = null; 358 var elem_offset; 359 if (this.curRow == 0 && this.curCol != 0) {//resize column width 360 //Get the mouse and element position, determine whether to trigger resize, and change the mouse style 361 //offsetX,offsetY：When an event occurs, the mouse is opposite the upper left corner of the e.target 362 elem_offset = e.target.offsetWidth; 363 if (elem_offset - e.offsetX <= 3) { 364 this.resizeElem = e.target; 365 this.table.style.cursor = ‘e-resize‘; //resizeElem.style.cursor = ‘e-resize‘;--error,The cursor style is valid on the entire table, otherwise the cursor style is out of reach after the resizeElem 366 } else if ((e.offsetX <= 3) && (this.curCol > 1)) { 367 this.resizeElem = e.target.previousSibling; 368 this.table.style.cursor = ‘e-resize‘; 369 } 370 } 371 else if (this.curCol == 0 && this.curRow != 0) {//resize row height 372 elem_offset = e.target.offsetHeight; 373 if (elem_offset - e.offsetY <= 3) { 374 this.resizeElem = e.target; 375 this.table.style.cursor = ‘s-resize‘; 376 377 } else if ((e.offsetY <= 3) && (this.curRow > 1)) { 378 //find e.target Previous column corresponding element 379 this.resizeElem = this.table.rows[this.curRow - 1].cells[this.curCol]; 380 this.table.style.cursor = ‘s-resize‘; 381 } 382 } 383 //TD element not handled 384 } 385 ExcelTable.prototype.tableMouseDownResizeFun = function (e) { 386 if (this.table.style.cursor == ‘e-resize‘) {//resize column width 387 this.resizeFlag = true; 388 this.resizeLine.style.left = ExcelTable.getOffSet(this.resizeElem).x + this.resizeElem.offsetWidth + ‘px‘; //The resize line should appear on the right edge of the element 389 this.resizeLine.style.width = "0px"; 390 this.resizeLine.style.height = this.table.offsetHeight + ‘px‘; 391 this.resizeLine.style.top = ExcelTable.getOffSet(this.table).y + ‘px‘; 392 this.resizeLine.style.borderLeft = "dashed 1px red"; 393 this.resizeLine.className = "show"; 394 this.downOffset = ExcelTable.getOffSet(this.resizeElem).x + this.resizeElem.offsetWidth; 395 } 396 else if (this.table.style.cursor == ‘s-resize‘) {//resize row height 397 this.resizeFlag = true; 398 this.resizeLine.style.left = ExcelTable.getOffSet(this.table).x + ‘px‘; ; 399 this.resizeLine.style.width = this.table.offsetWidth + ‘px‘; 400 this.resizeLine.style.height = "1px"; 401 this.resizeLine.style.top = ExcelTable.getOffSet(this.resizeElem).y + this.resizeElem.offsetHeight + ‘px‘; //The resize line should appear on the bottom edge of the element 402 this.resizeLine.style.borderTop = "dashed 1px red"; 403 this.resizeLine.className = "show"; 404 this.downOffset = ExcelTable.getOffSet(this.resizeElem).y + this.resizeElem.offsetHeight; 405 } 406 this.documentAddOrRemoveMouseMoveEvents(true); 407 this.documentAddOrRemoveMouseUpEvents(true); 408 } 409 410 ExcelTable.prototype.tableMouseDownSelectFun = function (e) { 411 if (e.target == this.table) return; //Moving outside of the table, is this.table 412 if (e.target == this.allImg) return; //e.target isn‘t img 413 //if selSrcElem is th,then selDesElem can be th or td; 414 //But, selSrcElem is td,then selDesElem must is td; 415 this.selFlag = true; 416 this.selSrcElem = e.target; 417 this.selDesElem = e.target; 418 this.documentAddOrRemoveMouseUpEvents(true); 419 } 420 ExcelTable.prototype.tableMouseMoveSelectFun = function (e) { 421 if (e.target == this.table) return; 422 if (e.target == this.allImg) return; 423 if ((this.selSrcElem.tagName == "TD") && (e.target.tagName != "TD")) return; 424 this.selDesElem = e.target; 425 this.calSelectPositionFun(); 426 } 427 ExcelTable.prototype.calSelectPositionFun = function () { 428 var selSrcRow = this.selSrcElem.parentElement.rowIndex; 429 var selSrcCol = this.selSrcElem.cellIndex; 430 var selDesRow = this.selDesElem.parentElement.rowIndex; 431 var selDesCol = this.selDesElem.cellIndex; 432 433 var srcOffx = ExcelTable.getOffSet(this.selSrcElem).x; 434 var srcOffy = ExcelTable.getOffSet(this.selSrcElem).y; 435 var DesOffx = ExcelTable.getOffSet(this.selDesElem).x; 436 var DesOffy = ExcelTable.getOffSet(this.selDesElem).y; 437 var divwidtd = (DesOffx > srcOffx) ? this.selDesElem.offsetWidth : this.selSrcElem.offsetWidth; 438 var divheight = (DesOffy > srcOffy) ? this.selDesElem.offsetHeight : this.selSrcElem.offsetHeight; 439 440 if ((selSrcRow != 0 && selSrcCol != 0) && (selDesRow != 0 && selDesCol != 0)) { 441 this.showSelectDiv(Math.min(srcOffx, DesOffx), Math.min(srcOffy, DesOffy), Math.abs(DesOffx - srcOffx) + divwidtd, Math.abs(DesOffy - srcOffy) + divheight); 442 } 443 else if ((selSrcCol == 0 && selSrcRow != 0) && (selDesRow != 0)) {//选择行 444 this.showSelectDiv(ExcelTable.getOffSet(this.selSrcElem).x, Math.min(srcOffy, DesOffy), this.table.offsetWidth, Math.abs(DesOffy - srcOffy) + divheight); 445 } 446 else if ((selSrcRow == 0 && selSrcCol != 0) && (selDesCol != 0)) {//选择行 447 this.showSelectDiv(Math.min(srcOffx, DesOffx), ExcelTable.getOffSet(this.selSrcElem).y, Math.abs(DesOffx - srcOffx) + divwidtd, this.table.offsetHeight); 448 } 449 } 450 ExcelTable.prototype.documentMouseUpSelectFun = function (e) { 451 // selDesElem is the last valid value in tableMouseMoveSelectFun 452 this.selFlag = false; 453 if (this.selSrcElem == null) return; 454 this.calSelectPositionFun(); 455 this.documentAddOrRemoveMouseUpEvents(false); 456 } 457 ExcelTable.prototype.initTable = function () { 458 var elemTd = null; 459 var elemTr = null; 460 for (var i = 0; i < this.initRow; ++i) { 461 elemTr = document.createElement("tr"); 462 for (var j = 0; j < this.initCol; ++j) { 463 if (i == 0 && j == 0) { 464 elemTd = document.createElement("th"); 465 elemTd.className = "rowth"; 466 this.allImg = document.createElement("img"); 467 this.allImg.src = "http://www.mamicode.com/img/all.jpg"; 468 elemTd.appendChild(this.allImg); 469 } 470 else if (i == 0) { 471 elemTd = document.createElement("th"); 472 elemTd.className = "colth"; 473 elemTd.innerText = ExcelTable.calcColNum(j - 1); 474 } 475 else if (j == 0) { 476 elemTd = document.createElement("th"); 477 elemTd.className = "rowth"; 478 elemTd.innerText = i; 479 } 480 else { 481 elemTd = document.createElement("td"); 482 } 483 elemTr.appendChild(elemTd); 484 } 485 this.table.appendChild(elemTr); 486 } 487 } 488 ExcelTable.prototype.initContextMenu = function () { 489 this.contextMenu = document.createElement("div"); 490 this.contextMenu.id = "contextmenu"; 491 var elemInsert = document.createElement("div"); 492 elemInsert.innerText = "insert"; 493 this.contextMenu.appendChild(elemInsert); 494 var elemDelete = document.createElement("div"); 495 elemDelete.innerText = "delete"; 496 this.contextMenu.appendChild(elemDelete); 497 //var self = this; 498 //elemInsert.addEventListener("click", function () { 499 // self.insertRowOrCol(); 500 //});//Two methods are available 501 elemInsert.addEventListener("click", (function (me) { 502 return function () { 503 me.insertRowOrCol(); 504 }; 505 })(this)); 506 var self = this; 507 elemDelete.addEventListener("click", function () { 508 self.deleteRowOrCol(); 509 }); 510 document.body.appendChild(this.contextMenu); 511 this.hideContextMenu(); 512 } 513 ExcelTable.prototype.initResizeLine = function () { 514 this.resizeLine = document.createElement(‘div‘); 515 this.resizeLine.id = "resizeline"; 516 document.body.appendChild(this.resizeLine); 517 this.hideResizeLine(); 518 } 519 ExcelTable.prototype.initSelectDiv = function () { 520 this.selectDiv = document.createElement(‘div‘); 521 this.selectDiv.id = "selectdiv"; 522 document.body.appendChild(this.selectDiv); 523 this.hideSelectDiv(); 524 525 } 526 ExcelTable.prototype.init = function () { 527 //initialize table 528 this.initTable(); 529 //initialize contextmenu 530 this.initContextMenu(); 531 //initialize resizeLine 532 this.initResizeLine(); 533 //initialize selectDiv 534 this.initSelectDiv(); 535 536 this.addEvents = (function (self) { 537 self.table.addEventListener("contextmenu", function (e) { 538 self.contextMenuFun(e); 539 }); 540 self.table.addEventListener("mousemove", function (e) { 541 self.tableMouseMoveFun(e); 542 }); 543 self.table.addEventListener("mousedown", function (e) { 544 self.tableMouseDownFun(e); 545 }); 546 547 document.addEventListener("click", function (e) { 548 self.documentClickFun(e); 549 }); 550 })(this); 551 } 552 </script> 553 </head> 554 <body> 555 <table id="maintable"></table> 556 </body> 557 </html>
实现的功能如下：
1.插入，删除
2.改变列宽和行高
3.选择功能
存在的bug:当执行了操作2和3之后，再执行1，行高会改变，选择区域也无法刷新。
学到的知识：
1. 尽量不用innerHTML,代码不清楚，耗费编译资源大，用innerText取代，或者使用createElement
2.js中少修改style,可以通过添加className来修改，前提是在css中设定好.class 的样式
3.事件之间的关系
4.事件响应函数中的this,两种方法
5.js函数类 哪些设为成员变量，哪些设为类的方法，哪些设为原型方法
6.修改表格的行列高：
7.两个重要的属性：
pointer-events: none;
user-select: none;
8.参数，默认参数
9.几个变量：elem.offsetLeft，elem.offsetTop，elem.offsetParent
elem.offsetWidth,elem.offsetHeight,
e.offsetX，e.offsetY
e.screenX,e.screenY
10,尽量使用addEventListener和removeEventListener，少用onclick方法添加事件响应函数，因为onclick方法会存在覆盖行为。
11.表格操作：
获取当前元素行列号：this.curRow = e.target.parentElement.rowIndex;
this.curCol = e.target.cellIndex;
获取表格行列数： var rowsNum = this.table.rows.length;
var colsNum = this.table.rows.item(0).cells.length;
插入行：
var row = this.table.insertRow(this.curRow);
for (var i = 1; i < colsNum; ++i) {
row.insertCell(i);
}
删除行：this.table.deleteRow(this.curRow);
插入列：
for (var i = 0; i < rowsNum; ++i) {
this.table.rows[i].insertCell(this.curCol);
}
删除列：
for (var i = 0; i < rowsNum; ++i) {
this.table.rows[i].deleteCell(this.curCol);
}
12.消息处理事件函数参数必须写上e,负责函数体内默认的e为全局event对象，类似window对象
需要继续学习：
1.table 布局 其属性：width height overFlow:scroll
给 thead tbody tfoot上添加事件
2.JS浮点数运算
JS学习大作业-Excel
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。