<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>"Excel"</title>
<style type="text/css">
img{
pointer-events: none;
}
#maintable {
table-layout: fixed;
border: #999999 1px solid;
border-collapse: collapse;
user-select: none;
}
#maintable td, #maintable th {
box-sizing: border-box;
user-select: none;
height: 20px;
width: 65px;
}
#maintable td {
border: #D4D4D4 1px solid;
}
#maintable th {
border: #999999 1px solid;
background-color: #E6E6E6;
font-size: 13px;
overflow: hidden;
}
#maintable .rowth {
width: 25px;
}
#maintable .colth {
height: 30px;
}
.show {
display: block;
}
.hide {
display: none;
}
#contextmenu {
position: fixed;
width: 120px;
border: #D4D4D4 1px solid;
background-color: white;
}
#contextmenu div {
color: #333333;
padding: 5px 20px;
width: 120px;
box-sizing: border-box;
background-color: white;
}
#contextmenu div:hover {
background: #E6E6E6;
}
#resizeline {
pointer-events: none;
position: absolute;
border-left: dashed 1px red;
}
#selectdiv {
border: green 2px solid;
box-sizing: border-box;
background-color: rgba(200,200,200,0.5);
position: absolute;
pointer-events: none;
} </style>
<script type="text/javascript">
window.addEventListener("load", function () {
new ExcelTable("maintable", 3, 20, 20, 300, 5);
});
function ExcelTable(id, span, initRow, initCol, maxWidthOrHeight, minWidthOrHeight) {
this.span = (undefined == span) ? 3 : span;
this.initRow = initRow;
this.initCol = initCol;
this.maxWidthOrHeight = (undefined == maxWidthOrHeight) ? 300 : maxWidthOrHeight;
this.minWidthOrHeight = (undefined == minWidthOrHeight) ? 5 : minWidthOrHeight;
this.curRow = 0;
this.curCol = 0;// colindex of mouseEvents.target
this.resizeElem = null;// resize operator elem
this.resizeFlag = false;
this.downOffset = 0; //when resize,movedownEvent starting position
this.upOffset = 0; //when resize,moveupEvent ending position
this.selSrcElem = null;//when select,movedownEvent.target
this.selDesElem = null; //when select,moveupEvent.target
this.selFlag = false;
this.table = document.getElementById(id);
this.allImg=null;
this.resizeLine = null;
this.contextMenu = null;
this.selectDiv = null;
var self = this;
/*this.handler1 = function (e) {
//var mouseMoveElement = this;//***此时回调的this是触发此事件的元素
self.documentMouseMoveFun(e);
};*/
this.handler2 = function (e) {
//var mouseMoveElement = this;//***此时回调的this是触发此事件的元素
self.documentMouseUpFun(e);
};
//other method
this.handler1 = (function (me) {
return function (e) {
me.documentMouseMoveFun(e);
};
})(this);
this.init();
}
ExcelTable.getOffSet = function (obj) {
var p = new Object();
p.x = obj.offsetLeft;
p.y = obj.offsetTop;
obj = obj.offsetParent;
while (obj) {
p.x += obj.offsetLeft;
p.y += obj.offsetTop;
obj = obj.offsetParent;
}
return p;
}
ExcelTable.calcColNum = function (num) {
var colNum = [];
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"];
colNum.push(letters[num % letters.length]);
num = Math.floor(num / letters.length);
while (num) {
--num;
colNum.push(letters[num % letters.length]);
num = Math.floor(num / letters.length);
}
return colNum.reverse().join("");
}
ExcelTable.prototype.insertRowOrCol = function () {
if (this.curCol == 0) {
this.insertRow();
}
else if (this.curRow == 0) {
this.insertCol();
}
}
ExcelTable.prototype.insertRow = function () {
//real time get latest rowsNum,colsNum
var rowsNum = this.table.rows.length;
var colsNum = this.table.rows.item(0).cells.length;
var row = this.table.insertRow(this.curRow);
var th = document.createElement("th");//first insert a th
th.className = "rowth";
row.appendChild(th);
for (var i = 1; i < colsNum; ++i) {
row.insertCell(i);
}
this.refreshRowSerialNumber();
}
ExcelTable.prototype.refreshRowSerialNumber = function () {
//real time get latest rowsNum,colsNum
var rowsNum = this.table.rows.length;
for (var j = 1; j < rowsNum; ++j) {
if (j > 0) {
this.table.rows[j].cells[0].innerText = j;
}
}
}
ExcelTable.prototype.insertCol = function () {
//real time get latest rowsNum,colsNum
var rowsNum = this.table.rows.length;
var colsNum = this.table.rows.item(0).cells.length;
var th = document.createElement("th");//first insert a th
th.className = "colth";
this.table.rows[0].insertBefore(th, this.table.rows[0].childNodes[this.curCol]);
for (var i = 1; i < rowsNum; ++i) {
this.table.rows[i].insertCell(this.curCol);
}
this.refreshColSerialNumber();
}
ExcelTable.prototype.refreshColSerialNumber = function () {
//real time get latest rowsNum,colsNum
var colsNum = this.table.rows.item(0).cells.length;
for (var j = 1; j < colsNum; ++j) {
this.table.rows[0].cells[j].innerText = ExcelTable.calcColNum(j - 1);
}
}
ExcelTable.prototype.deleteRowOrCol = function () {
if (this.curCol == 0) {
this.deleteRow();
}
else if (this.curRow == 0) {
this.deleteCol();
}
}
ExcelTable.prototype.deleteRow = function () {
//real time get latest rowsNum,colsNum
var rowsNum = this.table.rows.length;
var colsNum = this.table.rows.item(0).cells.length;
this.table.deleteRow(this.curRow);
this.refreshRowSerialNumber();
}
ExcelTable.prototype.deleteCol = function () {
//real time get latest rowsNum,colsNum
var rowsNum = this.table.rows.length;
var colsNum = this.table.rows.item(0).cells.length;
for (var i = 0; i < rowsNum; ++i) {
this.table.rows[i].deleteCell(this.curCol);
}
this.refreshColSerialNumber();
}
ExcelTable.prototype.showContextMenu = function (offx, offy) {
this.contextMenu.style.left = offx + "px";
this.contextMenu.style.top = offy + "px";
this.contextMenu.className = "show";
}
ExcelTable.prototype.hideContextMenu = function () {
this.contextMenu.className = "hide";
}
ExcelTable.prototype.showResizeLine = function (offx, offy) {
this.resizeLine.style.left = offx + "px";
this.resizeLine.style.top = offy + "px";
this.resizeLine.className = "show";
}
ExcelTable.prototype.hideResizeLine = function () {
this.resizeLine.className = "hide";
}
ExcelTable.prototype.contextMenuFun = function (e) {
this.curRow = e.target.parentElement.rowIndex;
this.curCol = e.target.cellIndex;
if (this.curRow == 0 || this.curCol == 0) {
e.preventDefault();
var offx = e.clientX;//==e.screenX
var offy = e.clientY;//!=e.screenY
this.showContextMenu(offx, offy);
}
}
ExcelTable.prototype.showSelectDiv = function (offx, offy, width, height) {
this.selectDiv.className = "show";
this.selectDiv.style.left = offx + "px";
this.selectDiv.style.top = offy + "px";
this.selectDiv.style.width = width + "px";
this.selectDiv.style.height = height + "px";
}
ExcelTable.prototype.hideSelectDiv = function () {
this.selectDiv.className = "hide";
}
ExcelTable.prototype.documentAddOrRemoveMouseMoveEvents = function (add) {
/*var self = this;
var handler = function (e) {
self.documentMouseMoveFun(e); //keynote:handler can't use "this",becauese "this" is the context variable that refers to the element that fired the event
};*/
if (add) {
document.addEventListener('mousemove', this.handler1, false);
}
else {
document.removeEventListener('mousemove', this.handler1, false);
}
}
ExcelTable.prototype.documentAddOrRemoveMouseUpEvents = function (add) {
/*var self = this;
var handler = function (e) {
self.documentMouseUpFun(e);
};*/
if (add) {
document.addEventListener('mouseup', this.handler2, false);
}
else {
document.removeEventListener('mouseup', this.handler2, false);
}
}
ExcelTable.prototype.documentMouseMoveFun = function (e) {
this.documentMouseMoveResizeFun(e);
}
ExcelTable.prototype.documentMouseUpFun = function (e) {
if (this.resizeFlag) {
this.documentMouseUpResizeFun(e);
}
this.documentMouseUpSelectFun(e);
}
ExcelTable.prototype.documentMouseMoveResizeFun = function (e) {
if (this.curRow == 0 && this.curCol != 0) {//resize column width
//The maximum width of the resizeElem is not more than 300px, and the minimum is no less than 5px;
if ((e.clientX - ExcelTable.getOffSet(this.resizeElem).x) <= this.maxWidthOrHeight && (e.clientX - ExcelTable.getOffSet(this.resizeElem).x) >= this.minWidthOrHeight) {
this.resizeLine.style.left = e.clientX + 'px';
this.upOffset = e.clientX;
} else if ((e.clientX - ExcelTable.getOffSet(this.resizeElem).x) > this.maxWidthOrHeight) {
this.upOffset = ExcelTable.getOffSet(this.resizeElem).x + this.maxWidthOrHeight;
} else {
this.upOffset = ExcelTable.getOffSet(this.resizeElem).x + this.minWidthOrHeight;
}
}
else if (this.curCol == 0 && this.curRow != 0) {//resize row height
//The maximum height of the resizeElem is not more than 300px, and the minimum is no less than 5px;
if ((e.clientY - ExcelTable.getOffSet(this.resizeElem).y) <= this.maxWidthOrHeight && (e.clientY - ExcelTable.getOffSet(this.resizeElem).y) >= this.minWidthOrHeight) { //最大不超过300px,最小不小于5px;
this.resizeLine.style.top = e.clientY + 'px';
this.upOffset = e.clientY;
} else if ((e.clientY - ExcelTable.getOffSet(this.resizeElem).y) > this.maxWidthOrHeight) {
this.upOffset = ExcelTable.getOffSet(this.resizeElem).y + this.maxWidthOrHeight;
} else {
this.upOffset = ExcelTable.getOffSet(this.resizeElem).y + this.minWidthOrHeight;
}
}
}
ExcelTable.prototype.documentMouseUpResizeFun = function (e) {
if (this.curRow == 0 && this.curCol != 0) {//resize column width
this.resizeLine.className = "hide";
var w = this.resizeElem.offsetWidth + this.upOffset - this.downOffset;
//Loop to resize width
var trs = this.table.rows;
for (var i = 0; i < trs.length; ++i) {
trs[i].cells[this.resizeElem.cellIndex].style.width = w + 'px';
}
}
else if (this.curCol == 0 && this.curRow != 0) {//resize row height
this.resizeLine.className = "hide";
var h = this.resizeElem.offsetHeight + this.upOffset - this.downOffset;
//Loop to resize height
var tr = this.resizeElem.parentElement;
for (var i = 0; i < tr.cells.length; ++i) {
//must use next two lines to change height
tr.cells[i].style.height = h + 'px';
tr.cells[i].style.lineHeight = h + 'px';
}
}
this.resizeFlag = false;
this.table.style.cursor = "default";
this.resizeElem = null;
this.documentAddOrRemoveMouseMoveEvents(false);
this.documentAddOrRemoveMouseUpEvents(false);
}
ExcelTable.prototype.documentClickFun = function (e) {
this.hideContextMenu();
}
ExcelTable.prototype.tableMouseMoveFun = function (e) {
if (!this.resizeFlag) {//when event of documentMouseMove occur,tableMouseMove also occur;so make a distinction
this.tableMouseMoveResizeFun(e);
}
if (this.selFlag) {
this.tableMouseMoveSelectFun(e);
}
}
ExcelTable.prototype.tableMouseDownFun = function (e) {
// deal with resize
if (this.resizeElem != null) {
this.tableMouseDownResizeFun(e);
}
else {
//deal with selection
this.tableMouseDownSelectFun(e);
}
} ExcelTable.prototype.tableMouseMoveResizeFun = function (e) {
this.curRow = e.target.parentElement.rowIndex;
this.curCol = e.target.cellIndex;
this.table.style.cursor = "default";
this.resizeElem = null;
var elem_offset;
if (this.curRow == 0 && this.curCol != 0) {//resize column width
//Get the mouse and element position, determine whether to trigger resize, and change the mouse style
//offsetX,offsetY：When an event occurs, the mouse is opposite the upper left corner of the e.target
elem_offset = e.target.offsetWidth;
if (elem_offset - e.offsetX <= 3) {
this.resizeElem = e.target;
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
} else if ((e.offsetX <= 3) && (this.curCol > 1)) {
this.resizeElem = e.target.previousSibling;
this.table.style.cursor = 'e-resize';
}
}
else if (this.curCol == 0 && this.curRow != 0) {//resize row height
elem_offset = e.target.offsetHeight;
if (elem_offset - e.offsetY <= 3) {
this.resizeElem = e.target;
this.table.style.cursor = 's-resize'; } else if ((e.offsetY <= 3) && (this.curRow > 1)) {
//find e.target Previous column corresponding element
this.resizeElem = this.table.rows[this.curRow - 1].cells[this.curCol];
this.table.style.cursor = 's-resize';
}
}
//TD element not handled
}
ExcelTable.prototype.tableMouseDownResizeFun = function (e) {
if (this.table.style.cursor == 'e-resize') {//resize column width
this.resizeFlag = true;
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
this.resizeLine.style.width = "0px";
this.resizeLine.style.height = this.table.offsetHeight + 'px';
this.resizeLine.style.top = ExcelTable.getOffSet(this.table).y + 'px';
this.resizeLine.style.borderLeft = "dashed 1px red";
this.resizeLine.className = "show";
this.downOffset = ExcelTable.getOffSet(this.resizeElem).x + this.resizeElem.offsetWidth;
}
else if (this.table.style.cursor == 's-resize') {//resize row height
this.resizeFlag = true;
this.resizeLine.style.left = ExcelTable.getOffSet(this.table).x + 'px'; ;
this.resizeLine.style.width = this.table.offsetWidth + 'px';
this.resizeLine.style.height = "1px";
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
this.resizeLine.style.borderTop = "dashed 1px red";
this.resizeLine.className = "show";
this.downOffset = ExcelTable.getOffSet(this.resizeElem).y + this.resizeElem.offsetHeight;
}
this.documentAddOrRemoveMouseMoveEvents(true);
this.documentAddOrRemoveMouseUpEvents(true);
} ExcelTable.prototype.tableMouseDownSelectFun = function (e) {
if (e.target == this.table) return; //Moving outside of the table, is this.table
if (e.target == this.allImg) return; //e.target isn't img
//if selSrcElem is th,then selDesElem can be th or td;
//But, selSrcElem is td,then selDesElem must is td;
this.selFlag = true;
this.selSrcElem = e.target;
this.selDesElem = e.target;
this.documentAddOrRemoveMouseUpEvents(true);
}
ExcelTable.prototype.tableMouseMoveSelectFun = function (e) {
if (e.target == this.table) return;
if (e.target == this.allImg) return;
if ((this.selSrcElem.tagName == "TD") && (e.target.tagName != "TD")) return;
this.selDesElem = e.target;
this.calSelectPositionFun();
}
ExcelTable.prototype.calSelectPositionFun = function () {
var selSrcRow = this.selSrcElem.parentElement.rowIndex;
var selSrcCol = this.selSrcElem.cellIndex;
var selDesRow = this.selDesElem.parentElement.rowIndex;
var selDesCol = this.selDesElem.cellIndex; var srcOffx = ExcelTable.getOffSet(this.selSrcElem).x;
var srcOffy = ExcelTable.getOffSet(this.selSrcElem).y;
var DesOffx = ExcelTable.getOffSet(this.selDesElem).x;
var DesOffy = ExcelTable.getOffSet(this.selDesElem).y;
var divwidtd = (DesOffx > srcOffx) ? this.selDesElem.offsetWidth : this.selSrcElem.offsetWidth;
var divheight = (DesOffy > srcOffy) ? this.selDesElem.offsetHeight : this.selSrcElem.offsetHeight; if ((selSrcRow != 0 && selSrcCol != 0) && (selDesRow != 0 && selDesCol != 0)) {
this.showSelectDiv(Math.min(srcOffx, DesOffx), Math.min(srcOffy, DesOffy), Math.abs(DesOffx - srcOffx) + divwidtd, Math.abs(DesOffy - srcOffy) + divheight);
}
else if ((selSrcCol == 0 && selSrcRow != 0) && (selDesRow != 0)) {//选择行
this.showSelectDiv(ExcelTable.getOffSet(this.selSrcElem).x, Math.min(srcOffy, DesOffy), this.table.offsetWidth, Math.abs(DesOffy - srcOffy) + divheight);
}
else if ((selSrcRow == 0 && selSrcCol != 0) && (selDesCol != 0)) {//选择行
this.showSelectDiv(Math.min(srcOffx, DesOffx), ExcelTable.getOffSet(this.selSrcElem).y, Math.abs(DesOffx - srcOffx) + divwidtd, this.table.offsetHeight);
}
}
ExcelTable.prototype.documentMouseUpSelectFun = function (e) {
// selDesElem is the last valid value in tableMouseMoveSelectFun
this.selFlag = false;
if (this.selSrcElem == null) return;
this.calSelectPositionFun();
this.documentAddOrRemoveMouseUpEvents(false);
}
ExcelTable.prototype.initTable = function () {
var elemTd = null;
var elemTr = null;
for (var i = 0; i < this.initRow; ++i) {
elemTr = document.createElement("tr");
for (var j = 0; j < this.initCol; ++j) {
if (i == 0 && j == 0) {
elemTd = document.createElement("th");
elemTd.className = "rowth";
this.allImg = document.createElement("img");
this.allImg.src = "img/all.jpg";
elemTd.appendChild(this.allImg);
}
else if (i == 0) {
elemTd = document.createElement("th");
elemTd.className = "colth";
elemTd.innerText = ExcelTable.calcColNum(j - 1);
}
else if (j == 0) {
elemTd = document.createElement("th");
elemTd.className = "rowth";
elemTd.innerText = i;
}
else {
elemTd = document.createElement("td");
}
elemTr.appendChild(elemTd);
}
this.table.appendChild(elemTr);
}
}
ExcelTable.prototype.initContextMenu = function () {
this.contextMenu = document.createElement("div");
this.contextMenu.id = "contextmenu";
var elemInsert = document.createElement("div");
elemInsert.innerText = "insert";
this.contextMenu.appendChild(elemInsert);
var elemDelete = document.createElement("div");
elemDelete.innerText = "delete";
this.contextMenu.appendChild(elemDelete);
//var self = this;
//elemInsert.addEventListener("click", function () {
// self.insertRowOrCol();
//});//Two methods are available
elemInsert.addEventListener("click", (function (me) {
return function () {
me.insertRowOrCol();
};
})(this));
var self = this;
elemDelete.addEventListener("click", function () {
self.deleteRowOrCol();
});
document.body.appendChild(this.contextMenu);
this.hideContextMenu();
}
ExcelTable.prototype.initResizeLine = function () {
this.resizeLine = document.createElement('div');
this.resizeLine.id = "resizeline";
document.body.appendChild(this.resizeLine);
this.hideResizeLine();
}
ExcelTable.prototype.initSelectDiv = function () {
this.selectDiv = document.createElement('div');
this.selectDiv.id = "selectdiv";
document.body.appendChild(this.selectDiv);
this.hideSelectDiv(); }
ExcelTable.prototype.init = function () {
//initialize table
this.initTable();
//initialize contextmenu
this.initContextMenu();
//initialize resizeLine
this.initResizeLine();
//initialize selectDiv
this.initSelectDiv(); this.addEvents = (function (self) {
self.table.addEventListener("contextmenu", function (e) {
self.contextMenuFun(e);
});
self.table.addEventListener("mousemove", function (e) {
self.tableMouseMoveFun(e);
});
self.table.addEventListener("mousedown", function (e) {
self.tableMouseDownFun(e);
}); document.addEventListener("click", function (e) {
self.documentClickFun(e);
});
})(this);
}
</script>
</head>
<body>
<table id="maintable"></table>
</body>
</html>
实现的功能如下：
1.插入，删除
2.改变列宽和行高
3.选择功能
存在的bug:当执行了操作2和3之后，再执行1，行高会改变，选择区域也无法刷新。
学到的知识：
1. 尽量不用innerHTML,代码不清楚，耗费编译资源大，用innerText取代，或者使用createElement
2.js中少修改style,可以通过添加className来修改，前提是在css中设定好.class 的样式
3.事件之间的关系：鼠标move事件documentMouseMove和tableMouseMove都会触发，置于执行顺序这就涉及到冒泡与捕获的关系
oncontext会触发mousedown,mouseup等
onclick和ondbclick会同时存在，一般通过在oclick中加timeout来区分，后续学习。
4.事件响应函数中的this,两种方法,不能直接使用this,因为this始终指向当前上下文，对于事件响应函数中的this只当前响应元素。
elemInsert.addEventListener("click", (function (me) {
return function () {
me.insertRowOrCol();
};
})(this));
var self = this;
elemDelete.addEventListener("click", function () {
self.deleteRowOrCol();
});
5.js函数类 哪些设为成员变量（每个对象都需要单独有一份），哪些设为类的方法（工具方法），哪些设为原型方法
6.修改表格的行列高：
//Loop to resize width
var trs = this.table.rows;
for (var i = 0; i < trs.length; ++i) {
trs[i].cells[this.resizeElem.cellIndex].style.width = w + 'px';
}
//Loop to resize height
var tr = this.resizeElem.parentElement;
for (var i = 0; i < tr.cells.length; ++i) {
//must use next two lines to change height
tr.cells[i].style.height = h + 'px';
tr.cells[i].style.lineHeight = h + 'px';
}
7.两个重要的属性：
pointer-events: none;//表示它将捕获不到任何点击，而只是让事件穿透到它的下面。
user-select: none;//文本不能被选择
8.参数，默认参数
在Javascript中， 函数定义的参数个数， 与调用时传入的参数个数，是可以不同的．
一般情况下，在定义函数时，将必须传入的参数放在前面， 可选的参数放在后面．在函数体内部需要对参数的传入情况作判断，以防参数不存在时程序出错．
例如
function js(x, y, z) {
this.x = x || 0;//或者this.span = (undefined == span) ? 3 : span;
this.y = y || 0;
this.z = z || 0;
} 调用时可以传入0-3个参数都不会出错，但传参的顺序是已经定了的．
比如：
var A = new js(); //A.x=0, A.y=0, A.z=0
var A=new js(5, 3); //A.x=5, A.y=3, A.z=0 如果只想传递参数y, 则必须传递两个参数，其中第一个可传入null或0 如x是可选y是必选，建议在定义函数时改变形参的顺序
9.几个变量：elem.offsetLeft，elem.offsetTop，elem.offsetParent
elem.offsetWidth,elem.offsetHeight,
e.offsetX，e.offsetY
e.screenX,e.screenY
10,尽量使用addEventListener和removeEventListener，少用onclick方法添加事件响应函数，因为onclick方法会存在覆盖行为，前者可以添加多个事件处理程序
注意：addEventListener和removeEventListener中第二个参数指向的函数必须是同一个，因此必须在外面定义好handler,才能确保使用的是同一个函数，如果在内部分别定义，及时函数体相同，也是指向不同位置的不同函数。详细可参见代码中例子。
问题：addEventListener和removeEventListener次数不对称会怎样？
通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除，如下面的例子所示：
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
alert(this.id);
}, false);
btn.removeEventListener("click", function () { //无效！
alert(this.id);
}, false);
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浮点数运算