CocoRoboDesktop/js/UForm/EditorTable.js

Namespace.register("U.UF.E");
//初始化table


/**
*  表格总接口
* range为编辑器的光标对象
*/
U.UF.E.table = function (range) {
    var _p,
        _inputo,
        _inputt,
        _frag = $$("frag"),
        _table = U.UF.E.table;  //简写命名空间
    _table._range = range;
    _p = $$("p", { "style": { "cssText": "text-align: left;font-weight: bold;padding: 10px 0 0 15px;" }, "innerHTML": "表格尺寸: " }, _frag);
    _p = $$("p", { "style": { "cssText": "text-align: left;margin-top: 15px;font-size: 14px;padding-left: 30px;" }, "innerHTML": "列数: " }, _frag);
    _inputo = $$("input", { "type": "number", "style": { "cssText": "width: 80px;margin-left: 65px;" }, "min": "1" }, _p);
    _p = $$("p", { "style": { "cssText": "text-align: left;padding-left: 30px;margin-top: 15px;font-size: 14px;margin-bottom: 22px;" }, "innerHTML": "行数: " }, _frag);
    _inputt = $$("input", { "type": "number", "style": { "cssText": "width: 80px;margin-left: 65px;" }, "min": "1" }, _p);
    //弹出框的html代码
    U.UF.UI.confirm(_frag, function () {    //弹框输入 行 和 列
        var _row = _inputo.value;   //行
        var _col = _inputt.value;   //列
        if (_row >= 1 && _col >= 1) {   //如果 行和列的值大于1 则添加表格
            _table.addTable(_row, _col);
        }
    });
    U.selectEl(document).unbind('mousedown', U.UF.E.table.removeFocus); //先取消事件监听 在添加 防止重复绑定
    U.selectEl(document).bind('mousedown', U.UF.E.table.removeFocus); //添加点击时的聚焦效果 并且若存在textarea元素 则删除并获取textarea的值给td
};

//初始化整理table，功能作用： 给外部添加的table元素添加样式和事件
U.UF.E.table.load = function (tableel) {
    var _table = U.UF.E.table;  //简写命名空间
    var _tableEl = tableel;
    if (_tableEl.features) return;  //如果已初始化 则直接返回

    _tableEl.features = true;   //代表已初始化过
    var _pelDiv = _tableEl.parentNode;  //父节点的初始化
    var _allTd = _tableEl.querySelectorAll("td");

    _allTd.forEach(function (v) {   /*删除所有display为none的dt元素*/
        U.selectEl(v).rmAttr("width");
        var _value = U.selectEl(v).css("display");
        if (_value === "none") {
            v.remove();
        }
    });

    _pelDiv.style.cssText = "overflow-y:hidden;padding-bottom:5px;padding-right:7px;";   //_div的样式
    _tableEl.style.cssText = _tableEl.style.cssText + "border-spacing: 0;border-collapse: collapse;position: relative;";
    _tableEl.contentEditable = "false";
    _table.tableOver(_tableEl);  //添加选中选出事件 防止选中td时 选中外面的元素 而报错
    var _trList = _tableEl.querySelectorAll("tr");
    var _tdList = U.selectEl(_tableEl).find("td");
    //列拉升处理
    for (var i = 0; i < _tdList.length; i++) {
        var _tdCopy = _tdList[i];
        _tdCopy.contentEditable = "true";
        _tdCopy.style.cssText += ";outline:0;box-sizing:border-box;position:relative;padding:0px;border:2px solid #333;" //这样子写csstext不会给覆盖
        var _tdWidth = _tdCopy.clientWidth;
        _tdCopy.style.width = _tdWidth + "px";    //给td添加width
        _table.loadCell(_tdCopy); //初始有合并单元格 的情况
        var _colRule = $$("div", { "style": { "outline": "0", "zIndex": "1", "position": "absolute", "top": 0, "right": 0, "cursor": "col-resize", "width": "3px", "height": "100%" }, "tabindex": "0", "contenteditable": "false", "className": "U_MD_O_W_Table_colRule", "inline": true }, _tdCopy); //列尺
        _table.colExpanding(_colRule); //给列尺 添加左右拉伸事件
        _table.dragCheckd(_tdCopy);    //td拖拽的选中事件
        _table.rightClick(_tableEl);    //添加右键
    }
    //行拉升处理
    for (var i = 0; i < _trList.length; i++) {
        var _trEl = _trList[i];
        _trEl.style.cssText += ";position:relative;overflow:hidden;";
        var _rowRule = $$("div", { "style": { "outline": "0", "zIndex": "1", "position": "absolute", "left": 0, "margin-top": _trEl.clientHeight + "px", cursor: "row-resize", height: "3px", width: "100%" }, tabindex: "0", "contenteditable": "false", "className": "U_MD_O_W_Table_rowRule", "inline": true }, _trEl); //行尺
        _table.rowExpanding(_rowRule);  //行尺 上下拉伸事件
    };
}

/**
* 初始有合并单元格 的情况
* tdEl td元素
*/
U.UF.E.table.loadCell = function (tdEl) {
    var _table = U.UF.E.table;  //简写命名空间
    var _tableEl = _table.parentSelect(tdEl, "table");   //获取table元素
    var _colSpan = tdEl.colSpan - 1;   //跨了_colSpan列
    var _rowSpan = tdEl.rowSpan - 1;  //跨了_rowSpan行
    if (_colSpan >= 1) {
        for (var i = 0; i < _colSpan; i++) {
            var _newTd = $$("td");
            _newTd.style.display = "none";
            _table.After(tdEl, _newTd);
        }
    }
    if (_rowSpan >= 1) {
        var _tdIndex = _table.index(tdEl);       //获取该td的所在索引
        var _trIndex = _table.index(tdEl.parentNode);  //获取该行tr所在位置
        var _trList = _tableEl.querySelectorAll("tr"); //获取所有的tr

        for (var i = 1; i <= _rowSpan; i++) {    //获取该tr的下_rowSpan个tr
            var _tdList = _trList[_trIndex + i].querySelectorAll("td"); //获取该tr的所有td
            var _td = _tdList[_tdIndex - 1];
            for (var j = 0; j <= _colSpan; j++) {
                var _newTd = $$("td");
                _newTd.style.display = "none";
                _table.After(_td, _newTd);
            }
        }
    }
}

/**
* 创建表格
* @param row   表格的行
* @param col   表格的列
*/
U.UF.E.table.addTable = function (row, col) {
    var i, j, _tr, _td,
        _frag = $$("frag"),
        _pel = U.UF.E.table.createTablePel(),  //table父节点
        _table = $$("table", { style: { cssText: "border-spacing: 0;border-collapse: collapse;width: 100%;position: relative;table-layout:fixed;"} }, _pel),
        _tbody = $$("tbody", {}, _table),
        _width = Math.max(Math.floor(_table.clientWidth / col), 50)
    ;
    // var _width = Math.max(Math.floor(_table.clientWidth / col), 50);
    //循环创建tr td
    for (i = 0; i < row; i++) {
        _tr = $$("tr", {}, _frag);  //创建tr
        for (j = 0; j < col; j++) {
            _td = $$("td", { style: { width: _width + "px" }, "innerHTML": "<br />" }, _tr);
        }
    }
    _tbody.appendChild(_frag);    //修改
    U.UF.E.table.load(_table);
};

/**
* 换行并返回该行的div 然后在该行下面创建空div(防止表格后无法聚焦)
* return 创建表格的div(父节点)
*/
U.UF.E.table.createTablePel = function () {
    var _table = U.UF.E.table;
    //console.log(_table._range);
    var _range = U.UF.E.table._range,   //获取光标
        _div = U.UF.E.getLineElement(_range.startContainer);    //获取光标所在行的div
    if (_div.textContent !== "") {   //如果该行有内容 则新建一行div
        var _div = U.selectEl("#" + U.UF.E.key.addLine(_range).addLine)[0];
    }
    //   U.selectEl(_div).attr("contenteditable", "false");    //无内容的div(表格的父节点) 取消编辑效果
    _div.style.cssText = "overflow-y:hidden;padding-bottom:5px;padding-right:7px;width:90%";   //_div的样式
    U.UF.E.key.addLine(_range);   //在表格的父节点下添加div 防止无法聚焦
    _table.placeCaretAtEnd(_div);
    return _div;
};

/**
* 将表格的第一个tr里的所有列尺元素 添加 zindex为1 的样式
* tableEl 表格元素
*/
U.UF.E.table.firstLinePeak = function (tableEl) {
    U.selectEl(tableEl).find(".U_UF_E_Table_peak").css("height", 0);  //原来有列尺的元素高度清0
    U.selectEl(tableEl).find(".U_UF_E_Table_peak").removeClass("U_UF_E_Table_peak");  //改变 删除所有列尺的zIndex为1的样式
    var _height = tableEl.clientHeight;  //获取表格的高
    var _colRuleList = tableEl.querySelectorAll("tr")[0].querySelectorAll(".U_MD_O_W_Table_colRule"); //获取第一行的列尺
    for (var i = 0, len = _colRuleList.length; i < len; i++) {
        var _colRule = _colRuleList[i];
        _colRule.style.height = _height + "px"; //所有列尺的高等于表格的高
        U.selectEl(_colRule).addClass("U_UF_E_Table_peak");
    }
};

/**
*
* @param table 防止选中事件时选中到表格外的元素而报错
*/
U.UF.E.table.tableOver = function (table) {
    U.selectEl(table).bind('mouseover', function () {    //判断鼠标是否在该table里 如果在 才可以选择区域
        this.over = true;
    });
    U.selectEl(table).bind('mouseout', function () {
        this.over = false;
    });
};

/**
*
* @param colrule 列尺(div) 添加左右拉伸事件
*/
U.UF.E.table.colExpanding = function (colrule) {
    var _div = colrule;
    U.selectEl(_div).bind({
        'mousedown': function (e) {
            U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove();    //删除右键元素
            U.UF.EV.stopBubble(e);                                    //阻止冒泡
            this.style.backgroundColor = "#8cb3e0"; //修改列尺(div)的颜色
            var _table = U.UF.E.table;
            var _this = this;
            var _tdEl = this.parentNode;  //获取td(每个列对应一个td父节点)
            var _tableEl = _table.parentSelect(this, "table");    //获取所在的table
            var _tableElWidth = _tableEl.clientWidth;       //table当前的宽度
            var _trList = _tableEl.querySelectorAll("tr");    //获取所有的tr
            var _tdElIndex = _table.index(_tdEl);  //获取td在tr的索引位置(列)
            var _dis,   //移动的距离
                _disX;   //移动后的位置
            var _oMouseX = e.pageX;                                   //获取鼠标按下时的X坐标
            var _oX = parseInt(this.style.right);               //获取当前Left坐标
            var expandingMove = function (e) {                      //拖拽时移动用的函数
                U.UF.EV.stopDefault(e);                               //取消默认拖拽
                var _mouseX = e.pageX;                                //鼠标移动时的x坐标
                _dis = _mouseX - _oMouseX;                            //移动的距离
                _disX = _dis + _oX;                                   //移动后的位置
                U.selectEl(_this).css("right", -_disX + "px");             //同步当前的left
            };
            var expandingUp = function () {                  //拖拽时松开用的函数
                _this.style.backgroundColor = "";   //列尺颜色 变为空
                var _child;
                for (var i = 0, len = _trList.length; i < len; i++) {
                    var _colTdEl = U.selectEl("td", _trList[i])[_tdElIndex];   //列的td _trList[i].querySelectorAll("td")
                    _colTdEl.style.width = _colTdEl.offsetWidth + _disX + "px";    //同步宽度
                    var _colRule = _colTdEl.querySelectorAll('.U_MD_O_W_Table_colRule');    //该td对应的列尺
                    U.selectEl(_colRule).css("right", "0px"); //同步当前的left
                    _child = U.selectEl("div", _trList[i]);
                    _child[_child.length - 1].style.marginTop = _trList[i].offsetHeight + "px";
                }
                U.selectEl(document).unbind('mousemove', expandingMove);
                U.selectEl(document).unbind('mouseup', expandingUp);
            };
            U.selectEl(document).bind('mousemove', expandingMove);
            U.selectEl(document).bind('mouseup', expandingUp)
        },
        'dblclick': function (e) {
            U.UF.EV.stopBubble(e);                                    //阻止冒泡
        },   //阻止td的双击
        'mousemove': function (e) {
            U.UF.EV.stopBubble(e);                                    //阻止冒泡
            U.UF.EV.stopDefault(e);                                //取消默认拖拽
        }
    });
};

/**
*
* @param rowrule 行尺(div) 添加上下拉伸事件
*/
U.UF.E.table.rowExpanding = function (rowrule) {   //高度扩张
    var _div = rowrule;
    U.selectEl(_div).bind({
        'mousedown': function (e) {
            U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove();    //删除右键元素
            this.style.backgroundColor = "#8cb3e0";
            U.UF.EV.stopBubble(e);                                     //阻止冒泡
            var _oMouseY = e.pageY;                                    //获取鼠标按下时的Y坐标
            var _this = this;
            var _oY = parseInt(this.style.marginTop);                 //获取当前Top坐标
            var _trEl = this.parentNode;                                //获取tr
            var expandingMove = function (e) {                           //拖拽时移动用的函数
                U.UF.EV.stopDefault(e);                                //取消默认拖拽
                var _mouseY = e.pageY;                                 //鼠标移动时的Y坐标
                var _dis = _mouseY - _oMouseY + _oY;                   //移动的距离
                _dis = Math.max(30, _dis);                              //拉伸后的tr的高度不能小于30px
                _trEl.style.height = _dis + "px";
                var clienHeight = _trEl.clientHeight; //tr的高度 会根据内容有个最小值 因此 这个tr最后的高度 才是最终值
                _dis = Math.max(clienHeight, _dis);
                _trEl.style.height = _dis + "px";
                U.selectEl(_this).css("margin-top", _dis + "px");
            };
            var expandingUp = function () {                  //拖拽时松开用的函数
                var _table = U.UF.E.table;  //简写命名空间    
                var _tableEl = _table.parentSelect(_this, "table");  //获取table元素
                _table.firstLinePeak(_tableEl); //更新第一行的列尺高度
                _this.style.backgroundColor = "";
                U.selectEl(document).unbind('mousemove', expandingMove);
                U.selectEl(document).unbind('mouseup', expandingUp);
            };

            U.selectEl(document).bind('mousemove', expandingMove);
            U.selectEl(document).bind('mouseup', expandingUp)
        },
        'mousemove': function (e) {
            U.UF.EV.stopBubble(e);                                    //阻止冒泡
            U.UF.EV.stopDefault(e);                                //取消默认拖拽
        }
    });
};


/*
* 添加文本框 并给文本框添加事件
* parent td元素(文本框父元素)
* text 为文本 可要可不要
*/
U.UF.E.table.createTextArea = function (parent, text) {
    var _textArea = $$("textarea", { className: "U_UF_E_Table_tdText", value: text || "", contenteditable: "true", inline: true }, parent);   //添加textarea 并且将td的内容放入textarea
    U.selectEl(_textArea).bind('mousedown', function (e) {
        U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove();    //删除右键元素              //阻止冒泡
    }); //阻止td的冒泡 (选中效果 和 聚焦效果)
    var autoHeight = function (el) {  //表格自动适应高
        el.nodeType === 1 ? "" : el = el.target;    //el只能为textarea
        el.scrollHeight ? el.style.height = el.scrollHeight + "px" : "";   //此处为textarea的高度跟随文字输入的内容自动增高
        var _rowRuleList = U.selectEl(".U_MD_O_W_Table_rowRule");   //获取所有行尺
        for (var i = 0, len = _rowRuleList.length; i < len; i++) {
            var _trPel = _rowRuleList[i].parentNode;    //每个行尺 对应一个 tr元素
            _trPel.style.height = _trPel.clientHeight;  //使每个tr的height 等于 clientHeight
            U.selectEl(_rowRuleList[i]).css("margin-top", _trPel.clientHeight + "px");    //同步margintop 的位置
        }
    };
    autoHeight(_textArea);  //由于textarea输入自后td的高度会变化 因此所有行尺的位置重新定位
    U.selectEl(_textArea).bind('keydown', autoHeight);    //键盘监听 自动适应高
    U.selectEl(_textArea).bind('keyup', autoHeight);  //键盘监听 自动适应高
    U.selectEl(_textArea).bind('blur', function () {
        var _textla = U.selectEl(".U_UF_E_Table_tdText");
        var _tdEl = U.selectEl(".U_UF_E_Table_tdText")[0].parentNode;
        _tdEl.innerText = _textla[0].value;
        _textla.remove();
    });
}

/**
*
* @param td 添加鼠标拖拽效果的 td
* 给td添加鼠标拖拽的选中效果
*/
U.UF.E.table.dragCheckd = function (td) {
    var _tdEl = td;
    U.selectEl(_tdEl).bind('mousedown', function (e) {
        U.UF.EV.stopBubble(e); //阻止冒泡
        U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove(); //删除右键元素
        if (e.button != 2) {
            var _table = U.UF.E.table;
            //移除原本选中的效果
            U.selectEl(".U_UF_E_Table_tdCheckd").removeClass("U_UF_E_Table_tdCheckd");
            U.selectEl(".U_UF_E_Table_tdCurrent").removeClass("U_UF_E_Table_tdCurrent");
            //给td添加聚焦样式
            U.selectEl(this).addClass("U_UF_E_Table_tdCurrent");

            var _start = this; //获取点击元素
            var _startX = _table.index(_start); //记录x坐标轴
            var _startY = _table.index(this.parentNode);   //获取y坐标轴
            var _checkFlag = true;   //注意下面的_table.over是一个属性 防止选中区域在表格外面
            var _tableEl = _table.parentSelect(this, "table");    //获取父节点table

            //拖拽时移动用的函数
            var _drapMove = function (e) {
                var tagEl = e.path.filter(_filter)[0];
                if (tagEl) {
                    U.UF.EV.stopBubble(e); //阻止冒泡
                    if (!(_tableEl.over) || (tagEl === _start && _checkFlag)) return;    //此处防止选中table外元素 与 鼠标必须选中两个td才会有选中效果
                    _checkFlag = false;  //如果不同 则选中过两个元素
                    var _endX = _table.index(tagEl);   //结束点的x坐标
                    var _endY = _table.index(tagEl.parentNode); //结束点的y坐标
                    U.selectEl(".U_UF_E_Table_tdCheckd").removeClass("U_UF_E_Table_tdCheckd");
                    _table.tdAddClass(tagEl.parentNode, _startX, _startY, _endX, _endY);   //给开始点和结束点组成的矩形 添加选中的class
                }
            };
            var _dragUp = function () { //拖拽时松开用的函数
                U.selectEl(document).unbind('mousemove', _drapMove);
                U.selectEl(document).unbind('mouseup', _dragUp);
                _checkFlag = true;
            };
            var _filter = function (el) {
                return el.nodeName && el.nodeName === "TD"
            }
            U.selectEl(document).bind('mousemove', _drapMove);
            U.selectEl(document).bind('mouseup', _dragUp);
        }
    });
};

/**
*  添加右键
*  tableEl 表格元素
*/
U.UF.E.table.rightClick = function (tableEl) {
    var _table = U.UF.E.table;
    var leftAddCol = {
        innerHTML: '左侧添加列',
        onclick: function () {
            _table.addColumn("left");
            U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove();    //删除右键元素
        },
        onmousedown: function (e) {
            U.UF.EV.stopBubble(e);                                    //阻止冒泡
        }
    };
    var rightAddCol = {
        innerHTML: '右侧添加列',
        onclick: function () {
            _table.addColumn("right");
            U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove();    //删除右键元素
        },
        onmousedown: function (e) {
            U.UF.EV.stopBubble(e);                                    //阻止冒泡
        }
    };
    var upAddLine = {
        innerHTML: '向上添加行',
        onclick: function () {
            _table.addTr("up");
            U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove();    //删除右键元素
        },
        onmousedown: function (e) {
            U.UF.EV.stopBubble(e);                                    //阻止冒泡
        }
    };
    var downAddLine = {
        innerHTML: '向下添加行',
        onclick: function () {
            _table.addTr("down");
            U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove();    //删除右键元素
        },
        onmousedown: function (e) {
            U.UF.EV.stopBubble(e);                                    //阻止冒泡
        }
    };
    var removeCol = {
        innerHTML: '删除列',
        onclick: function () {
            _table.removeColumn();
            U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove();    //删除右键元素
        },
        onmousedown: function (e) {
            U.UF.EV.stopBubble(e);                                    //阻止冒泡
        }
    };
    var removeLine = {
        innerHTML: '删除行',
        onclick: function () {
            _table.removeTr();
            U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove();    //删除右键元素
        },
        onmousedown: function (e) {
            U.UF.EV.stopBubble(e);                                    //阻止冒泡
        }
    };
    var mergeCells = {
        innerHTML: '合并单元格',
        onclick: function () {
            _table.mergeCells();
            U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove();    //删除右键元素
        },
        onmousedown: function (e) {
            U.UF.EV.stopBubble(e);                                    //阻止冒泡
        }
    };
    var _arr = [leftAddCol, rightAddCol, upAddLine, downAddLine, removeCol, removeLine, mergeCells];
    U.selectEl(tableEl).bind('contextmenu', function (e) {
        U.UF.EV.stopBubble(e);                                    //阻止冒泡
        U.UF.EV.stopDefault();
        U.UF.EL.rightMenu(_arr, tableEl);
        U.selectEl("#U_UF_EL_rightmenu").bind('contextmenu', function (e) {   //右键元素属于table 因此需要阻止冒泡
            U.UF.EV.stopBubble(e);                                    //阻止冒泡
        });
    });
    U.selectEl(tableEl).bind('mousedown', function (e) {
        U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove();    //删除右键元素
    });
};

/**
*
* @param direction 参数为 "left" 或 "right"
* 左右侧添加列
*/
U.UF.E.table.addColumn = function (direction) {
    var _table = U.UF.E.table;
    var tdList = U.selectEl(".U_UF_E_Table_tdCheckd");
    if (!tdList[0]) { //如果没有 选中的td
        if ($(".U_UF_E_Table_tdCurrent")[0]) { //再判断 有无聚焦的 td
            tdList = U.selectEl(".U_UF_E_Table_tdCurrent");
        } else {
            return; //如果没有 则直接返回
        }
    }
    var _tdEl;
    if (direction === "left") {
        _tdEl = tdList[0];
    } else if (direction === "right") {
        _tdEl = tdList[tdList.length - 1];
    }
    _table.insertTd(_tdEl, direction);
};

/**
*
* @param td  td元素
* @param direction  供添加左右列用的api 参数为 "left" 或 "right"
* 向每个tr的列(td) 前方或后方插入td
*/
U.UF.E.table.insertTd = function (td, direction) {
    var _table = U.UF.E.table;
    var _tdEl = td,
            _index = _table.index(_tdEl),    //在tr中位于所有td的位置
            _dir = direction;
    var _tableEl = _table.parentSelect(_tdEl, 'table');
    var _trList = U.selectEl(_tableEl).find("tr");
    var _tableElWidth = _tableEl.offsetWidth; //记住当前的宽度

    for (var i = 0, len = _trList.length; i < len; i++) {  //遍历每个tr的列(td) 在前方或后方插入td
        var _currentColumn = U.selectEl(_trList[i]).find("td")[_index];    //当前列
        var _tdElClone = _tdEl.cloneNode(); //克隆td
        if (_dir === "left") {
            _table.Before(_currentColumn, _tdElClone);    //在列的前面添加td
        }
        else if (_dir === "right") {
            _table.After(_currentColumn, _tdElClone); //在列的后面添加td
        }
        var _colRule = $$("div", { style: { position: "absolute", top: 0, left: "-7px", "margin-left": _tdElClone.style.width, cursor: "col-resize", width: "7px" }, className: "U_MD_O_W_Table_colRule", inline: true }, _tdElClone); //列尺
        _table.colExpanding(_colRule); //添加左右拉伸事件
        _table.createTextArea(_tdElClone); //添加文本框
        _table.dragCheckd(_tdElClone);    //td拖拽的选中事件
        U.selectEl(_tdElClone).removeClass("U_UF_E_Table_tdCheckd"); //清楚添加后的列的选中的样式
        U.selectEl(_tdElClone).removeClass("U_UF_E_Table_tdCurrent");
    }
    _tableEl.style.width = _tableElWidth + _tdEl.offsetWidth + "px";
    _table.firstLinePeak(_tableEl);    //第一行tr的所有列尺添加zIndex为1
};

/**
*
* @param direction 参数为 "up" 或 "down"
* 上下添加行
*/
U.UF.E.table.addTr = function (direction) {
    var _table = U.UF.E.table;
    var tdList = U.selectEl(".U_UF_E_Table_tdCheckd");
    if (!tdList[0]) { //如果没有 选中的td
        if ($(".U_UF_E_Table_tdCurrent")[0]) { //再判断 有无聚焦的 td
            tdList = U.selectEl(".U_UF_E_Table_tdCurrent");
        } else {
            return; //如果没有 则直接返回
        }
    }
    var _trEl, _trElClone;
    if (direction === "up") {
        _trEl = tdList[0].parentNode;
        _trElClone = _table.cloneTr(_trEl); //克隆tr 并给td 添加表格事件
        _table.Before(_trEl, _trElClone);
    } else if (direction === "down") {
        _trEl = tdList[tdList.length - 1].parentNode;    //向下插入行
        _trElClone = _table.cloneTr(_trEl); //克隆tr 并给td 添加表格事件
        _table.After(_trEl, _trElClone);
    }
    var _tableEl = _table.parentSelect(tdList[0], 'table');
    _table.firstLinePeak(_tableEl);    //将表格的第一个tr里的所有列尺元素 添加 zindex为1 的样式
};

/**
*  删除行
*/
U.UF.E.table.removeTr = function () {
    var _table = U.UF.E.table;
    var tdList = U.selectEl(".U_UF_E_Table_tdCheckd");
    if (!tdList[0]) { //如果没有 选中的td
        if ($(".U_UF_E_Table_tdCurrent")[0]) { //再判断 有无聚焦的 td
            tdList = U.selectEl(".U_UF_E_Table_tdCurrent");
        } else {
            return; //如果没有 则直接返回
        }
    }
    var start = _table.index(tdList[0].parentNode);
    var end = _table.index(tdList[tdList.length - 1].parentNode);
    var _tableEl = _table.parentSelect(tdList[0], "table");
    var _parentDiv = _table.parentSelect(_tableEl, "div");
    var _trList = U.selectEl(_tableEl).find("tr");
    for (var i = start; i <= end; i++) {
        _trList[i].remove();
    }
    if (!(_tableEl.querySelectorAll("tr").length)) {
        _parentDiv.remove();
        return
    }
    _table.firstLinePeak(_tableEl);    //将表格的第一个tr里的所有列尺元素 添加 zindex为1 的样式
};

/**
*
* @param tr 需要克隆的tr
* 克隆tr 并添加表格事件
*/
U.UF.E.table.cloneTr = function (tr) {
    var _table = U.UF.E.table;
    var _trNodes = tr.cloneNode(true); //带子节点的tr
    var _trClone = tr.cloneNode();  //无子节点的tr
    var _cloneTd = U.selectEl(_trNodes).find("td");
    for (var i = 0, len = _cloneTd.length; i < len; i++) {
        var _td = _cloneTd[i].cloneNode();
        U.selectEl(_td).rmAttr("rowspan");   //删除跨行的属性
        _trClone.appendChild(_td);
        var _colRule = $$("div", { style: { position: "absolute", top: 0, left: "-7px", "margin-left": _td.style.width, cursor: "col-resize", width: "7px" }, className: "U_MD_O_W_Table_colRule", inline: true }, _td); //列尺
        _table.colExpanding(_colRule); //添加左右拉伸事件
        //_table.tdDbClick(_td); //添加双击事件
        _table.createTextArea(_td);
        _table.dragCheckd(_td);    //td拖拽的选中事件
    }
    var _rowRule = $$("div", { style: { position: "absolute", zIndex: "1", left: 0, "margin-top": "30px", cursor: "row-resize", height: "3px", width: "100%" }, className: "U_MD_O_W_Table_rowRule", inline: true }, _trClone); //行尺
    _table.rowExpanding(_rowRule);  //上下拉伸事件
    U.selectEl(_trClone).find(".U_UF_E_Table_tdCheckd").removeClass("U_UF_E_Table_tdCheckd");    //删除所有选中表格和 聚焦表格的样式
    U.selectEl(_trClone).find(".U_UF_E_Table_tdCurrent").removeClass("U_UF_E_Table_tdCurrent");
    return _trClone;
};

/**
*  合并单元格功能
*/
U.UF.E.table.mergeCells = function () {
    var _table = U.UF.E.table;
    var _tdList = U.selectEl(".U_UF_E_Table_tdCheckd");
    if (_tdList.length <= 1) return;
    var _x1 = _table.index(_tdList[0]);  //x坐标开始点
    var _y1 = _table.index(_tdList[0].parentNode); //y坐标开始点
    var _x2 = _table.index(_tdList[_tdList.length - 1]); //x坐标结束点
    var _y2 = _table.index(_tdList[_tdList.length - 1].parentNode);  //y坐标结束点
    var _tableEl = _table.parentSelect(_tdList[0], "table");    //获取table元素
    var _trList = _tableEl.querySelectorAll("tr");  //获取table里所有tr
    var _text = "";     //合并后的总内容
    var allWidth = 0;   //合并后的总宽度
    for (var i = _y1; i <= _y2; i++) {  /*该循环*/
        var _trAllTd = _trList[i].querySelectorAll("td"); //获取选中表格的所在tr
        for (var j = _x1; j <= _x2; j++) { // 获取选中表格的 所在td
            var _tdEl = _trAllTd[j];    //获取每个选中的单元格
            _text += _tdEl.innerText;   //合并内容
            if (i === _y1) { //只计算选中表格第一行 的总宽度
                allWidth += _tdEl.offsetWidth;
            }
            if (i === _y1 && j === _x1) continue;    //第一个td就跳过 其他的则display为 none
            U.selectEl(_tdEl).css("display", "none");
        }
    }

    var _textNode = document.createTextNode(_text); //文字节点 _text为总内容
    var _firstNode = _table.getFirstText(_tdList[0]);   //获取被合并单元格的td所在的文字节点
    _firstNode ? _firstNode.remove() : ""; //如果存在文字节点 则删除
    _tdList[0].appendChild(_textNode); //然后将新创建的总文字节点 添加到该单元格里
    _tdList[0].style.width = allWidth + "px"; //添加总宽度
    var _col = U.selectEl(_tdList[0]).attr("colspan");
    _col <= _x2 - _x1 + 1 ? U.selectEl(_tdList[0]).attr("colspan", _x2 - _x1 + 1) : ""; //跨的列数
    U.selectEl(_tdList[0]).attr("rowspan", _y2 - _y1 + 1); //跨的行数
    U.selectEl(_tdList[0].querySelector(".U_MD_O_W_Table_colRule")).css("margin-left", allWidth + 'px');   //更新 列尺的位置
    _table.firstLinePeak(_tableEl);    //将表格的第一个tr里的所有列尺元素 添加 zindex为1 的样式
};

/**
* 删除列
*/
U.UF.E.table.removeColumn = function () {
    var _table = U.UF.E.table
    var tdList = U.selectEl(".U_UF_E_Table_tdCheckd");
    if (!tdList[0]) { //如果没有 选中的td
        if ($(".U_UF_E_Table_tdCurrent")[0]) { //再判断 有无聚焦的 td
            tdList = U.selectEl(".U_UF_E_Table_tdCurrent");
        } else {
            return; //如果没有 则直接返回
        }
    }
    var _start = _table.index(tdList[0]);  //列的开始位置
    var _end = _table.index(tdList[tdList.length - 1]); //列的结束位置

    var _tableEl = _table.parentSelect(tdList[0], 'table');
    var _trList = U.selectEl(_tableEl).find("tr");
    var _widthSum = 0;  //删除列的总宽
    for (var i = 0, len = _trList.length; i < len; i++) {
        var _tdList = U.selectEl(_trList[i]).find("td");
        for (var j = _start; j <= _end; j++) {
            i === 0 ? _widthSum += _tdList[j].offsetWidth : "";    //只计算第一行删除的列宽
            _tdList[j].remove();
        }
    }
    _tableEl.style.width = _tableEl.offsetWidth - _widthSum + "px";
    var _tdLen = _tableEl.querySelectorAll("td").length;  //获取当前列的长度
    if (!_tdLen) {    //如果table不存在td 则删除table和 table父节点(div)
        var _parentDiv = _table.parentSelect(_tableEl, "div");
        _parentDiv.remove();
        return
    }
    _table.firstLinePeak(_tableEl);    //将表格的第一个tr里的所有列尺元素 添加 zindex为1 的样式
};

/**
* 添加点击时的聚焦效果 并且若存在textarea元素 则删除并获取textarea的值给td
*/
U.UF.E.table.removeFocus = function () {        //添加点击时的聚焦效果 并且若存在textarea元素 则删除并获取textarea的值给td
    U.selectEl(".U_UF_E_Table_tdCheckd").removeClass("U_UF_E_Table_tdCheckd");
    U.selectEl(".U_UF_E_Table_tdCurrent").removeClass("U_UF_E_Table_tdCurrent");
    return;
    var _textArea = U.selectEl(".U_UF_E_Table_tdText")[0],        //如果存在textarea元素 则将其变为文本
            _pel;
    _textArea ? _pel = _textArea.parentNode : ""; //如果textArea存在 先获取父节点td 然后将其变为文本
    if (_pel) {
        var _textNode = document.createTextNode(_textArea.value);
        _pel.appendChild(_textNode);
        _textArea.remove();
    }
    var _rowRuleList = U.selectEl(".U_MD_O_W_Table_rowRule"); //使div的margintop 及时更新
    for (var i = 0, len = _rowRuleList.length; i < len; i++) {
        var _trEl = _rowRuleList[i].parentNode;
        _trEl.style.height = _trEl.clientHeight;
        U.selectEl(_rowRuleList[i]).css("margin-top", _trEl.clientHeight + "px");
    }
};

/**
*
* @param tr 获取所有tr用的(遍历所有tr)
* @param x1 开始点x坐标
* @param y1 开始点y坐标
* @param x2 结束点x坐标
* @param y2 结束点y坐标
*/
U.UF.E.table.tdAddClass = function (tr, x1, y1, x2, y2) {   //获取首尾坐标轴 最后组成矩形 然后添加选中的class
    var _trList = tr.parentNode.querySelectorAll("tr");
    var _x1 = Math.min(x1, x2);
    var _x2 = Math.max(x1, x2);
    var _y1 = Math.min(y1, y2);
    var _y2 = Math.max(y1, y2);
    for (var i = _y1; i <= _y2; i++) {
        var _tdList = _trList[i].querySelectorAll("td");
        for (var j = _x1; j <= _x2; j++) {
            U.selectEl(_tdList[j]).addClass("U_UF_E_Table_tdCheckd");
        }
    }
}

/**
*
* @param el 元素
* @returns {number} 返回当前元素在所有同类型元素 的第几个位置
*/
U.UF.E.table.index = function (el) {
    var _el = el;
    var _name = _el.nodeName;   //获取该元素的节点名
    var _list = _el.parentNode.querySelectorAll(_name); //获取父节下的所有自己的节点
    for (var i = 0, len = _list.length; i < len; i++) {
        if (_list[i] === _el) {
            return i;   //返回在数组的索引
        }
    }
};
/**
* 获取td的第一个文本元素
*/
U.UF.E.table.getFirstText = function (td) {
    var _child = td.childNodes;
    for (var i = 0, len = _child.length; i < len; i++) {
        if (_child[i].nodeType === 3) {
            return _child[i];
        }
    }
    return false;
}
/*获取指定标签的父节点*/
U.UF.E.table.parentSelect = function (el, type) {
    var _this = el;
    var type = type.toUpperCase();
    if (_this.tagName === type) return _this;
    var parent = _this.parentNode;
    while (parent.tagName !== type) {
        parent = parent.parentNode;
    }
    return parent;
};
/*在元素前面插入新元素*/
U.UF.E.table.Before = function (el, newEl) {
    var _this = el;
    var parentEl = _this.parentNode;
    parentEl.insertBefore(newEl, _this);
};
/*在元素后面插入新元素*/
U.UF.E.table.After = function (el, newEl) {
    var _this = el;
    if (_this && _this.parentNode) {
        var parentEl = _this.parentNode;
        var child = parentEl.childNodes;
        var last = child[child.length - 1] || parentEl.lastChild;
        if (last === _this) {
            parentEl.appendChild(newEl);
        } else {
            parentEl.insertBefore(newEl, _this.nextSibling);
        }
        return newEl;
    }
};

/**
*  使光标聚焦在该元素后面
* @param el 需要文字聚焦的 元素节点
*/
U.UF.E.table.placeCaretAtEnd = function (el) {    //传入光标要去的节点对象
    if (el.collapse) {   //如果存在el.collapsed 则是range
        var range = el;
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
        return;
    }
    if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
        el.focus && el.focus();
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
};

/*
合并单元格使用bug:
1.选中表格时 如出现行和列对不齐时 除了删除列不会有问题以外 其他都会出问题	
解决思路:由于合并单元格后 每行的td都对不齐了 因此需要修改选中td的接口 不准出现参差不齐的情况

2.在合并单元格的那一列用添加列 删除列会有bug   
解决思路: 由于合并单元格时 有占用两列或两行的情况 因此需要在添加列删除列那里将占用两列以上的情况考虑进去 针对colspan属性做判断

3.在合并单元格的那一行除了 向上添加行功能 其他都会有bug
解决思路:由于跨行合并单元格 会使第第一行变成占2行或以上 其他行display为none 因此如果向下添加行则需要将display为none 消掉 主要也是需要针对rowspan属性做判断
*/