框选

在Excel 表格中，一般我们会出一片区域来批量修改数据。现在要来实现这个过程。
如图所示：框选从 B2 开始，至 E8 结束。

实际上，框选会有4 种可能：

从B2开始，E8 结束
从B8开始，E2 结束
从 E2 开始，E8 结束
从 E8 开始，E2 结束

/**
* @property {Function} CharMinus 字母相减
* @param {String} CharA 输入字符
* @param {String} CharB 输入字符
* @returns {Number} 返回十进制编码
*/
CharMinus(CharA,CharB){ // 字母相减return this.CharToDecimal(CharA)-this.CharToDecimal(CharB)
}/**
* @property {Function} GetRectangle 计算出框选区域
* @param {String} from 行列串，例如：A1
* @param {String} to 行列串，例如：B2
* @returns {Array} 返回字符串数组，["A","1"]
*/
GetRectangle(from,to){var t = this.setRectanglecorner(from,to);var fromRC = t[0];var toRC = t[1];var distance = [this.CharMinus(toRC[0],fromRC[0]),toRC[1]-fromRC[1]]// console.log(fromRC);// console.log(toRC);// console.log(distance);var Rowcount = parseInt(fromRC[1])+distance[1]+1;var ColList = this.caculatemap.slice(this.CharToDecimal(fromRC[0]),this.CharToDecimal(fromRC[0])+distance[0]+1);var length = ColList.length;var Rectangle = [];for(var i = 0;i<length;i++){for(var j = fromRC[1];j<Rowcount;j++){Rectangle.push(ColList[i]+j);}}return {"Rowlength":Rowcount-parseInt(fromRC[1]),"Collength":length,"Rectangle":Rectangle};
}

列选择

/**
* @property {Function} colclick 点击列标头
* @param {Object} ev
* @returns {Boolean} 返回点击结果
*/
colclick(ev){var that = thisthat.emptyselectcells();var target = ev.target || ev.srcElement;console.log("选择"+target.getAttribute("id")+"列");var ii = that.searchcolInCells( target )// console.log(that.focus["sheets_size"][0],that.focus["sheets_size"][1])// console.log(ii)var cells__inputs = document.getElementsByClassName("cells__input");var length = cells__inputs.length;for(var row = 1;row<that.focus["sheets_size"][1]+1;row++){var i = ii+(row-1)*that.charcode.CharToDecimal(that.focus["sheets_size"][0])console.log(i)cells__inputs[i].style.backgroundColor = "#f3f2f1";that.focus["cells"].push(that.getThisTargetIndex(cells__inputs[i]));}that.focus["x"] = -1;that.focus["y"] = -1;console.log(that.focus["cells"]);return false;
}

行选择

/**
* @property {Function} rowclick 点击行标头
* @param {Object} ev
* @returns {Boolean} 返回点击结果
*/
rowclick(ev){var that = thisthat.emptyselectcells();var target = ev.target || ev.srcElement;console.log("选择"+target.getAttribute("id")+"行");var cells__inputs = document.getElementsByClassName("cells__input");var length = cells__inputs.length;for(var i = 0;i<length;i++){if(cells__inputs[i].getAttribute("data-y") == target.getAttribute("id")){cells__inputs[i].style.backgroundColor = "#f3f2f1";that.focus["cells"].push(cells__inputs[i].getAttribute("id"));}}that.focus["x"] = -1;that.focus["y"] = -1;console.log(that.focus["cells"]);return false;
}

列的右键菜单

colcontextmenu(ev){var that = this/*弹出菜单*/var target = ev.target || ev.srcElement;var contextmenulist = [];contextmenulist.push({"icon": "","name": "插入列","event": function () {var mainid = target.getAttribute("id");console.log(this.name, that.focus);console.log(mainid);var cells = document.getElementById("cells"); // 获取父节点var index;var Celement;var tempCache = [];that.focus["ColumnsSize"].push("200px");that.makeColumnsSize(that.focus["ColumnsSize"]);for(var i in that.focus["cells"]){// 根据表的尺寸，计算出相应的坐标index = that.charcode.countelementToindex(that.focus["sheets_size"][0],that.focus["sheets_size"][1],that.focus["cells"][i]);// 将计算出的元素压入临时缓冲tempCache.push(document.getElementById("cells").childNodes[index]);}that.emptyselectcells();Celement = document.createElement('div');Celement = that.creatElement({"Tag" : "div","ID" : that.creatGlobalId(),"ClassName" : "cells__alphabet","Data" : [{ "k":"x", "v":"" },{ "k":"y", "v":"" }],"Action":{"click":that.colclick.bind(that),"change":function(){},"contextmenu":that.colcontextmenu.bind(that)}});cells.insertBefore(Celement, document.getElementById(mainid)); // 在列标头前插入新元素var cells__alphabets = document.getElementsByClassName("cells__alphabet");var cells__alphabetcount = cells__alphabets.length;console.log("列标头总数："+cells__alphabetcount);var step = "A";for(var i = 0;i < cells__alphabetcount;i++){cells__alphabets[i].setAttribute("data-x",step);cells__alphabets[i].setAttribute("data-y","0");cells__alphabets[i].innerHTML = step;step = that.charcode.excel_Row_Increase(step,1);}that.focus["sheets_size"][0] = that.charcode.excel_Row_Increase(that.focus["sheets_size"][0],1);for(var i in tempCache){Celement = that.creatElement({"Tag" : "div","ID" : that.creatGlobalId(),"ClassName" : "cells__input","Data" : [{ "k":"x", "v":"" },{ "k":"y", "v":"" }],"Action":{"click":that.cellclick.bind(that),"dblclick":that.celldblclick.bind(that),"change":that.cellchange.bind(that),"mouseover":that.cellmouseover.bind(that),"mouseout":that.cellmouseout.bind(that),"mousedown":that.cellmousedown.bind(that),"mouseup":that.cellmouseup.bind(that),"contextmenu":that.cellcontextmenu.bind(that)}});cells.insertBefore(Celement, tempCache[i]); // 在列元素前插入新元素}}});that.updata_contextmenulist(contextmenulist,that.right__menu_list)console.log("列标头右击",target.getAttribute("data-x"),target.getAttribute("data-y"))var oDiv = document.getElementById(that.right__menu);oDiv.style.display = "block";oDiv.style.left = ev.clientX+"px";oDiv.style.top = ev.clientY+"px";/*整列标上底色*/that.colclick(ev)
}

行的右键菜单

rowcontextmenu(ev){var that = thisconsole.log("表格尺寸"+that.focus["sheets_size"]);/*弹出菜单*/console.log(this)var target = ev.target || ev.srcElement;var contextmenulist = [];contextmenulist.push({"icon": "","name": "插入行","event": function () {var mainid = target.getAttribute("id");console.log(this.name, that.focus);console.log(mainid);var cells = document.getElementById("cells"); // 获取父节点var index;var Celement;var tempCache = [];that.focus["RowsSize"].push("25px");that.makeRowsSize(that.focus["RowsSize"]);for(var i in that.focus["cells"]){// 根据表的尺寸，计算出相应的坐标index = that.charcode.countelementToindex(that.focus["sheets_size"][0],that.focus["sheets_size"][1],that.focus["cells"][i]);// 将计算出的元素压入临时缓冲tempCache.push(document.getElementById("cells").childNodes[index]);}// 根据表的尺寸，计算出相应的坐标index = that.charcode.countelementToindex(that.focus["sheets_size"][0],that.focus["sheets_size"][1],that.focus["cells"][0]);var icell = document.getElementById("cells").childNodes[index];that.emptyselectcells();Celement = document.createElement('div');Celement = that.creatElement({"Tag" : "div","ID" : that.creatGlobalId(),"ClassName" : "cells__number","Data" : [{ "k":"x", "v":"" },{ "k":"y", "v":"" }],"Action":{"click":that.rowclick.bind(that),"change":function(){},"contextmenu":that.rowcontextmenu.bind(that)}});cells.insertBefore(Celement, document.getElementById(mainid)); // 在列标头前插入新元素var cells__number = document.getElementsByClassName("cells__number");var cells__numbercount = cells__number.length;console.log("行标头总数："+cells__numbercount);for(var i = 0;i < cells__numbercount;i++){cells__number[i].setAttribute("data-x","0");cells__number[i].setAttribute("data-y",""+(i+1));cells__number[i].innerHTML = ""+(i+1);}that.focus["sheets_size"][1] = that.focus["sheets_size"][1]+1;var stop = that.charcode.excel_Row_Increase(that.focus["sheets_size"][0],1);for(var i = "A"; i != stop; i = that.charcode.excel_Row_Increase(i,1)){Celement = that.creatElement({"Tag" : "div","ID" : that.creatGlobalId(),"ClassName" : "cells__input","Data" : [{ "k":"x", "v": i },{ "k":"y", "v":"" }],"Action":{"click":that.cellclick.bind(that),"dblclick":that.celldblclick.bind(that),"change":that.cellchange.bind(that),"mouseover":that.cellmouseover.bind(that),"mouseout":that.cellmouseout.bind(that),"mousedown":that.cellmousedown.bind(that),"mouseup":that.cellmouseup.bind(that),"contextmenu":that.cellcontextmenu.bind(that)}});cells.insertBefore(Celement, icell); // 在列元素前插入新元素}}});that.updata_contextmenulist(contextmenulist,that.right__menu_list)console.log("列标头右击",target.getAttribute("data-x"),target.getAttribute("data-y"))var oDiv = document.getElementById(that.right__menu);oDiv.style.display = "block";oDiv.style.left = ev.clientX+"px";oDiv.style.top = ev.clientY+"px";/*整行标上底色*/that.emptyselectcells();var target = ev.target || ev.srcElement;console.log("选择"+target.getAttribute("id")+"行");var cells__inputs = document.getElementsByClassName("cells__input");var length = cells__inputs.length;for(var i = 0;i<length;i++){if(cells__inputs[i].getAttribute("data-y") == target.getAttribute("id")){cells__inputs[i].style.backgroundColor = "#f3f2f1";that.focus["cells"].push(cells__inputs[i].getAttribute("id"));}}that.focus["x"] = -1;that.focus["y"] = -1;console.log(that.focus["cells"]);/*整行标上底色*/that.rowclick(ev)
}

【用JS自制表格软件玩数据】6. 单元格的多选相关推荐

【用JS自制表格软件玩数据】2.读取 xls 文件
读写Excel Excel文档的包结构 Excel文档的组织形式 Content Types 主要内容(worksheet) 关联(Relationships) 第三方库 SheetJS 工作原理介绍 ...
【用JS自制表格软件玩数据】9. 自制三维 K线图蜡烛图
画三维 K线图蜡烛图概述效果图正面正面近景鸟瞰侧面近观俯视构建一个类初始化环境设置环境背景初始化摄像机设置相机的位置设置相机镜头的位置初始化场景创建坐标系蜡烛图的特点 ...
JS合并表格中内容一样的单元格
1.页面效果 2.js代码 function mergeCells() {var colNumber = tablecontent.rows.item(0).cells.length; //获取表格列 ...
Excel技巧【标记多行数据连续一样的行】【第一个单元格公式适用于所有本列所有行】【按照逗号分列】【快速统计出各个项出现的次数】【冻结窗口】[表格分段选择数据][根据单元格内容引索其他单元格数据指针]
标记多行数据一样的行我这里有一列数据,现在想识别出多行数据连续一样的目的行,数据如下左图所示: 这里可以对F1单元格使用这样的公式:=IF(AND(E1=E2,E2=E3,E3=E4,E4=E5,E ...
poi设置自动换行后显示不全_WPS表格：如何让数据超过单元格就自动换行并完全显示？...
在日常做表格的过程中,经常会碰到数据超过单元格溢出的情况.此时将单元格加宽来完全显示数据,是不现实的,只能让表格自动换行,让表格加长才能很好的解决这个问题. 我们在WPS2019中以下表为例,来演示一 ...
单元格内多个姓名拆分成一列_excel将一列数据拆为多个表格-excel：如何将一个单元格拆分成多行或多列？...
如何将一个Excel工作表的数据按一列的关键字拆分成... 工具/材料:Microsoft Office Excel2016版,Excel文档. 1.首先选中Excel文档,双击打开. 2.然后在该界 ...
HTML表格的单元格凹凸效果,JS+CSS实现可以凹陷显示选中单元格的方法
本文实例讲述了JS+CSS实现可以凹陷显示选中单元格的方法.分享给大家供大家参考.具体实现方法如下: JS+CSS实现可以凹陷显示选中的单元格 td{cursor:hand;font-size:12p ...
wps交叉表_WPS表格中如何锁定单个单元格？，这几步你要了解
如同加密文件一样,WPS表格中可以对单个单元格进行锁定.起到保护里面数据的作用,其具体操作步骤如下: 工具/材料 WPS办公软件操作方法 01 在桌面上双击WPS表格的快捷图标,打开WPS表格这款软 ...
Spread Studio for .NET 7: 使用现有数据填充单元格
2019独角兽企业重金招聘Python工程师标准>>> 使用 Spread Studio 表格控件你可以复制范围单元格并且填充到其他单元格中,复制数据和单元格格式.例如:如果目前有 ...

【用JS自制表格软件玩数据】6. 单元格的多选

单元格的框选，列选择，行选择

框选

列选择

行选择

列的右键菜单

行的右键菜单

【用JS自制表格软件玩数据】6. 单元格的多选相关推荐

最新文章

热门文章