【用JS自制表格软件玩数据】7. 设计常用的样式功能与单元格合并

已于 2022-01-26 23:35:26 修改
阅读量803 收藏 1
点赞数 1
分类专栏： javascript 文章标签： javascript 开发语言 excel
于 2022-01-24 12:49:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46596227/article/details/122664379
版权

表格的内容编辑和排版功能

当写完本系列后，我会把源代码分享出来给大家。本课程也会持续更新与矫正。欢迎留言指正！

简介

目前，我们的表格软件的基础结构已经开发得差不多了。现在开始要设计一些字体修改，加粗，变斜，合并单元格等功能。具体功能就放在顶部的工具栏中。

在这里插入图片描述

存储对象列表

这其中，需要一个鼠标的储存对象，它会把选中的单元格列表，都存储在 cells 这个属性中。以数组的形式存放。

/**
 * @property {Object} focus 鼠标点击的焦点
 */
this.focus = {
	"x":-1,"y":-1, // 鼠标选中状态：{-1 未选中,0 选中全部, 其他选中某元素
	"cells":[], // 储存已经被选中的单元格列表
	"Rectangle":{
		"Rowlength":0,
		"Collength":0
	},
	"leftbuttonHold" : false, // 鼠标左键在单元格中按住
	"menufocus":0, // 当前选中哪个顶部菜单
	"hasPopwin":false, // 判断是否有弹窗
	"sheets_size":[]
}

字体修改

在这里插入图片描述

{
	"Tag" : "select", "ID" : this.creatGlobalId(), "ClassName" : "font-name",
	"Action":{ "click":function(ev){
		var target = ev.target || ev.srcElement;
		if(!that.focus.x && !that.focus.y){
			var cells__inputs = document.getElementsByClassName("cells__input");
			var length = cells__inputs.length;
			for(var i = 0;i<length;i++){
				cells__inputs[i].style.fontFamily = target.value;
			}
		} else if(that.focus["cells"].length != 0){
			var length = that.focus["cells"].length;
			for(var i = 0;i<length;i++){
				var cell = that.getcell(that.focus["cells"][i]);
				cell.style.fontFamily = target.value;
			}
		}
	}, "change":function(){ console.log("change"); }},
	"Child":[
		{ "Tag": "option", "ID": this.creatGlobalId(), "Style": "--font:隶书", "Text": "隶书" },
		{ "Tag": "option", "ID": this.creatGlobalId(), "Style": "--font:微软雅黑", "Text": "微软雅黑" },
		{ "Tag": "option", "ID": this.creatGlobalId(), "Style": "--font:宋体", "Text": "宋体" },
		{ "Tag": "option", "ID": this.creatGlobalId(), "Style": "--font:Noto Sans", "selected": "selected", "Text": "Noto Sans" },
		{ "Tag": "option", "ID": this.creatGlobalId(), "Style": "--font:Arial", "Text": "Arial" },
		{ "Tag": "option", "ID": this.creatGlobalId(), "Style": "--font:Calibri", "Text": "Calibri" },
		{ "Tag": "option", "ID": this.creatGlobalId(), "Style": "--font:Comic Sans MS", "Text": "Comic Sans MS" },
		{ "Tag": "option", "ID": this.creatGlobalId(), "Style": "--font:Courier New", "Text": "Courier New" },
		{ "Tag": "option", "ID": this.creatGlobalId(), "Style": "--font:Impact", "Text": "Impact" },
		{ "Tag": "option", "ID": this.creatGlobalId(), "Style": "--font:Georgia", "Text": "Georgia" },
		{ "Tag": "option", "ID": this.creatGlobalId(), "Style": "--font:Garamond", "Text": "Garamond" },
		{ "Tag": "option", "ID": this.creatGlobalId(), "Style": "--font:Open Sans", "Text": "Open Sans" },
		{ "Tag": "option", "ID": this.creatGlobalId(), "Style": "--font:Palatino", "Text": "Palatino" },
		{ "Tag": "option", "ID": this.creatGlobalId(), "Style": "--font:Verdana", "Text": "Verdana" }
	]
}

尺寸修改

在这里插入图片描述

{
	"Tag" : "select", "ID" : this.creatGlobalId(), "ClassName" : "font-size",
	"Action":{ "click":function(ev){
		var target = ev.target || ev.srcElement;
		if(!that.focus.x && !that.focus.y){
			
			var cells__inputs = document.getElementsByClassName("cells__input");
			var length = cells__inputs.length;
			for(var i = 0;i<length;i++){
				cells__inputs[i].style.fontSize = target.value+"px";
			}

		} else if(that.focus["cells"].length != 0){
			var length = that.focus["cells"].length;
			for(var i = 0;i<length;i++){
				var cell = that.getcell(that.focus["cells"][i]);
				cell.style.fontSize = target.value+"px";
			}
		}
	}, "change":function(){}},
	"Child":[
		{ "Tag" : "option", "ID" : this.creatGlobalId(), "selected" : "selected", "Text" : "14" },
		{ "Tag" : "option", "ID" : this.creatGlobalId(), "Text" : "16" },
		{ "Tag" : "option", "ID" : this.creatGlobalId(), "Text" : "18" },
		{ "Tag" : "option", "ID" : this.creatGlobalId(), "Text" : "20" },
		{ "Tag" : "option", "ID" : this.creatGlobalId(), "Text" : "22" },
		{ "Tag" : "option", "ID" : this.creatGlobalId(), "Text" : "24" },
		{ "Tag" : "option", "ID" : this.creatGlobalId(), "Text" : "26" },
		{ "Tag" : "option", "ID" : this.creatGlobalId(), "Text" : "28" }
	]
}

加黑

在这里插入图片描述

{
	"Tag" : "div", "ID" : this.creatGlobalId(), "ClassName" : "icon icon-bold",
	"Action":{ "click":function(ev){
		var target = ev.target || ev.srcElement;
		if(!that.focus.x && !that.focus.y){
			
			var cells__inputs = document.getElementsByClassName("cells__input");
			var length = cells__inputs.length;
			for(var i = 0;i<length;i++){
				cells__inputs[i].style.fontWeight = "bold";
			}

		} else if(that.focus["cells"].length != 0){
			var length = that.focus["cells"].length;
			for(var i = 0;i<length;i++){
				var cell = that.getcell(that.focus["cells"][i]);
				console.log(cell.style.fontWeight);
				if(cell.style.fontWeight == "bold"){
					cell.style.fontWeight = "normal";
				}else{
					cell.style.fontWeight = "bold";
				}
			}
			
			console.log(that.focus);
		}
	}, "change":function(){}}
}

斜体

在这里插入图片描述

{
	"Tag" : "div", "ID" : this.creatGlobalId(), "ClassName" : "icon icon-italic",
	"Action":{ "click":function(ev){
		var target = ev.target || ev.srcElement;
		
		if(!that.focus.x && !that.focus.y){
			
			var cells__inputs = document.getElementsByClassName("cells__input");
			var length = cells__inputs.length;
			for(var i = 0;i<length;i++){
				cells__inputs[i].style.fontStyle = "italic";
			}

		} else if(that.focus["cells"].length != 0){
			var length = that.focus["cells"].length;
			for(var i = 0;i<length;i++){
				var cell = that.getcell(that.focus["cells"][i]);
				console.log(cell.style.fontStyle);
				if(cell.style.fontStyle == "italic"){
					cell.style.fontStyle = "normal";
				}else{
					cell.style.fontStyle = "italic";
				}
			}
		}
	}, "change":function(){}}
}

下划线

在这里插入图片描述

{
	"Tag" : "div", "ID" : this.creatGlobalId(), "ClassName" : "icon icon-underline",
	"Action":{ "click":function(ev){
		var target = ev.target || ev.srcElement;
		
		if(!that.focus.x && !that.focus.y){
			
			var cells__inputs = document.getElementsByClassName("cells__input");
			var length = cells__inputs.length;
			for(var i = 0;i<length;i++){
				cells__inputs[i].style.textDecoration = "underline";
			}

		} else if(that.focus["cells"].length != 0){
			var length = that.focus["cells"].length;
			for(var i = 0;i<length;i++){
				var cell = that.getcell(that.focus["cells"][i]);
				console.log(cell.style.textDecoration);
				if(cell.style.textDecoration == "underline"){
					cell.style.textDecoration = "none";
				}else{
					cell.style.textDecoration = "underline";
				}
			}
		}
	}, "change":function(){}}
}

居中，居左，居右

在这里插入图片描述

{
	"Tag" : "div", "ID" : this.creatGlobalId(), "ClassName" : "icon icon-alignl",
	"Action":{ "click":function(ev){
		var target = ev.target || ev.srcElement;
		if(!that.focus.x && !that.focus.y){
			
			var cells__inputs = document.getElementsByClassName("cells__input");
			var length = cells__inputs.length;
			for(var i = 0;i<length;i++){
				cells__inputs[i].style.justifyContent = "left";
			}
		} else if(that.focus["cells"].length != 0){
			var length = that.focus["cells"].length;
			for(var i = 0;i<length;i++){
				var cell = that.getcell(that.focus["cells"][i]);
				cell.style.justifyContent = "left";
			}
		}
	}, "change":function(){}}
},
{
	"Tag" : "div", "ID" : this.creatGlobalId(), "ClassName" : "icon icon-alignc",
	"Action":{ "click":function(ev){
		var target = ev.target || ev.srcElement;
		if(!that.focus.x && !that.focus.y){
			
			var cells__inputs = document.getElementsByClassName("cells__input");
			var length = cells__inputs.length;
			for(var i = 0;i<length;i++){
				cells__inputs[i].style.justifyContent = "center";
			}

		} else if(that.focus["cells"].length != 0){
			var length = that.focus["cells"].length;
			for(var i = 0;i<length;i++){
				var cell = that.getcell(that.focus["cells"][i]);
				cell.style.justifyContent = "center";
			}
		}
	}, "change":function(){}}
},
{
	"Tag" : "div", "ID" : this.creatGlobalId(), "ClassName" : "icon icon-alignr",
	"Action":{ "click":function(ev){
		var target = ev.target || ev.srcElement;
		if(!that.focus.x && !that.focus.y){
			
			var cells__inputs = document.getElementsByClassName("cells__input");
			var length = cells__inputs.length;
			for(var i = 0;i<length;i++){
				cells__inputs[i].style.textAlign = "right";
			}

		} else if(that.focus["cells"].length != 0){
			var length = that.focus["cells"].length;
			for(var i = 0;i<length;i++){
				var cell = that.getcell(that.focus["cells"][i]);
				cell.style.justifyContent = "right";
			}
		}
	}, "change":function(){}}
}

单元格的合并与居中

在这里插入图片描述

{
	"Tag" : "div", "ID" : this.creatGlobalId(), "ClassName" : "merge-center",
	"Action":{ "click":function(){ }, "change":function(){}},
	"Child":[
		{
			"Tag" : "div", "ID" : this.creatGlobalId(), "ClassName" : "icon",
			"Action":{ "click":function(){ }, "change":function(){}},
		},
		{
			"Tag" : "span", "ID" : this.creatGlobalId(), "Text" : "合并与居中",
			"Action":{
				"click":function(ev){
					var target = ev.target || ev.srcElement;
					
					if(that.focus["cells"].length == 0){
						console.log("未选中单元格");
						return;
					}

					var length = that.focus["cells"].length;
					if(length == 1){
						console.log("只选中一个单元格");
						
						var bigcell = that.getcell(that.focus["cells"][0]);
						
						// var gridColumn = bigcell.getAttribute("grid-column").split("/");
						// gridColumn[1] = "span 1";
						// var gridRow = bigcell.getAttribute("grid-row").split("/");
						// gridRow[1] = "span 1";
						bigcell.style.gridColumnEnd = "span 1";
						bigcell.style.gridRowEnd = "span 1";
						var ttt = bigcell.getAttribute("data-merge").split(":");
						if( ttt[0] != ttt[1] ){
							var displaylist = that.charcode.GetRectangle(ttt[0],ttt[1])["Rectangle"];
							for(var i in displaylist){
								that.getcell(displaylist[i]).style.display = "flex";
							}
							ttt[1] = ttt[0];
							bigcell.setAttribute("data-merge",ttt.join(":"));
						}
					}
					else{
						for(var i = 0; i< length; i++){
							var ttt = that.getcell(that.focus["cells"][i]).getAttribute("data-merge").split(":");
							if( ttt[0] != ttt[1] ){
								console.log("无法合并");
								return;
							}
						}
						var i=0;
						var firstRowCol = that.charcode.getRowCol(that.focus["cells"][i]);
						var ColStart = that.charcode.CharToDecimal(firstRowCol[0])+1;
						var RowStart = parseInt(firstRowCol[1])+1;
						
						var firstElement = that.getcell(that.focus["cells"][i]); // 获取第一个元素,合并第一个元素
						var ttt = firstElement.getAttribute("data-merge").split(":");
						ttt[1] = that.focus["cells"][that.focus["cells"].length-1];
						firstElement.setAttribute("data-merge",ttt.join(":"));
						
						firstElement.style.gridColumn = ColStart+"/span "+that.focus["Rectangle"]["Collength"];
						firstElement.style.gridRow = RowStart+"/span "+that.focus["Rectangle"]["Rowlength"];
						firstElement.style.justifyContent = "center";
						
					
						for(var i = 1; i< length; i++){
							that.getcell(that.focus["cells"][i]).style.display = "none";
						}
						that.emptyselectcells();
					}
					// var currentID = target.getAttribute("id");

				}, "change":function(){}
			},
		},
	]
}

最终效果

在这里插入图片描述

妇男主任
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
java js合并_JS合并单元格
weixin_32791013的博客
02-19 414
在Web中经常需要合并单元格，例如对于下面一个表格:table,table tr th,table tr td {border: 1px solid #0094ff;}表头1表头2表头3表头4列1列2列3列4列1列2列3列4列1列2列3列4表格原来样式:合并的JS方法:(可以作为一个工具方法)1、纵向合并，也就是对同一列的相邻行单元格相同的进行合并/*** 合并单元格(如果结束行传0代表合并所有行...
富文本编辑器以及表格操作，可拉伸单元格宽度、增加行、增加列、合并单元格
04-21
带富文本编辑器以及支持表格操作，可拉伸单元格宽度、增加行、增加列、合并单元格
sheetjs前段操作excel,点击合并拆分表格增删行列功能实现
andylou_1的专栏
03-06 5764
sheetjs的js-xlsx插件是专门为web前段处理excel表格开发的一款开源插件，插件的github地址是https://github.com/sheetjs/js-xlsx官网地址http://sheetjs.com/,它提供了excel表格的导入导出功能，为前段显示修改excel表格提供了可能，但是毕竟只是一个插件，无法实现excel的全部功能，比如表格的合并拆分这些...
js 自定义表格的合并单元格、插入行列、删除行列
我见青山多妩媚,料青山见我应如是
09-09 2867
js 自定义表格的合并单元格、插入行列、删除行列
js实现自定义合并单元格，el-table开箱即用
sssdal19995的博客
04-02 2654
分享一个简单易用的计算表格内单元格合并的工具，支持行合并、列合并等常见场景
js操作html的table,包括添加行，添加列，删除行，删除列，合并单元格（未实现）...
lifeneedyou的专栏
04-29 340
       记得以前面试的时候遇到过这样一个问题：有一个表格，然后有４个输入框，一个合并 按钮，输入框是这样的，从第几行到第几行，从第几列到第几列，然后点击按钮，合并 。当时我从学校出来，js知识只是知道一些，根本做不到！现在想想，其实这个问题也还是考基础功夫是否扎实！大家有兴趣可以自己做做看，测下自己是不是能够做出来。题目的截图：   第1/1列 第1/2列 第1/3列 第1...
table表格按列合并相同数据行单元格代码
07-13
在jsp、html页面中实现table表格按列合并相同数据行单元格代码，可实现功能为：在一个table表格中，合并指定列中所有相同数据相邻行单元格内容。
单元格合并插件tablesMergeCell.js
06-01
在网页设计中，表格是一种常用的数据组织方式，但有时为了呈现更清晰或更有层次的信息，可能需要合并单元格。例如，当有重复的列标题或者需要跨行或跨列显示数据时，单元格合并功能就显得尤为重要。tablesMergeCell....
Javascript合并表格中具有相同内容单元格示例
10-27
表格相同内容单元格的合并在以前也有过类似的教程，本文为大家讲解的是使用Javascript合并，具体示例及效果图如下，感兴趣的朋友可以参考下
ant-design-vue中将表格同一列内数据排序、数据相同的单元格合并
最新发布
06-08
ant-design-vue + VUE3,在table中按照某一列名进行排序并将内容相同的列合并； 包含原table数据排序，重组，行合并
js实现表格相同数据合并
07-10
为了提升用户体验，我们可以利用JavaScript（js）以及jQuery库来实现表格相同数据的合并功能，使表格看起来更整洁、专业。 首先，我们要理解JavaScript的基本概念。JavaScript是一种轻量级的解释型编程语言，广泛...
动态添加删除行
从心开始，重新开始
03-01 140
[code="html"] function add(obj) { var username = document.form.username.value;// 姓名 var flag = -1; //性别 for(var i=0;i
Js表格多行合并实现，可对多个列进行处理
热门推荐
强哥叨逼叨
08-22 1万+
先看下效果： 然后看完整代码，里面有详细的注释： &lt;!DOCcargoName html /&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;test table&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;table id="testTable" bor
搜索建议--AJAX （ASP.NET 异步完成）javascript 实现代码
蒋小龙的IT史
08-19 649
现在有很多javascript框架可以实现此功能。但是javascript具体怎么实现的，我们还是看源代码来分析吧。 javascript代码： var hasError=true; var XMLHttpReq; var mydiv; var myframe; var showtable; var showbody; var tableBox; var tableList;
html js 合并单元格合并单元格,htmljs合并单元格 excel怎样合并单元格
weixin_35690047的博客
06-15 734
根据网友提出的“htmljs合并单元格 excel怎样合并单元格”等问题，Excel办公网整理了各大知名网站有关“htmljs合并单元格 excel怎样合并单元格”的一些信息：题目：我想在网页中调用js程序来显示当前时间。问题是怎么改我都调用不出来。麻烦大家帮我看下，html和js里的程序我都写在下面，麻烦大家找下错误帮我改下。说明原因就更好了！lt;htmlgt;lt;headgt;lt;tit...
Ajax基础 (十二)---开发跨浏览器JavaScript
冰火欢迎您的光临！
05-28 432
一．向表中追加行完美的做法是：在table元素下建一个tbody的元素，tr元素增加到tbody元素。而不是直接增加到table元素下。         示例：                                                                      增加方法：              var cell = document
js,自动合并单元格
qq_31983635的博客
06-18 335
/** * 需要jquery * Table td 相同值合并行 要求： * 1.table 必须包含tbody，tbody为数据主休 * 2.指定特定的列合并，用merge id->表格的id,icol->要合并的列（从0开始),isCenter->是否垂直居中 * 3.mergeRowSpan 从第0列到colCount-1列合并 * 如果想合并n行，必须从小到大的顺序合并，如想合并第二行和第四行，调用顺序为 * merge('xxx',1,true) .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

妇男主任

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值