首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

选择单元格时更改单元格颜色并在离开单元格后恢复原始颜色

是一种常见的交互效果,在前端开发中可以通过JavaScript和CSS来实现。

在JavaScript中,我们可以通过监听单元格的事件来实现颜色的改变。当鼠标点击或者选中单元格时,可以使用DOM操作改变单元格的背景颜色,例如:

代码语言:txt
复制
cell.addEventListener('click', function() {
  cell.style.backgroundColor = 'red';
});

cell.addEventListener('blur', function() {
  cell.style.backgroundColor = ''; // 恢复原始颜色
});

在CSS中,我们可以使用伪类来实现当单元格被选中时改变颜色的效果。例如:

代码语言:txt
复制
.cell:focus {
  background-color: blue;
}

这样当单元格被选中时,其背景颜色会变为蓝色。当失去焦点时,背景颜色会恢复原始的颜色。

这种交互效果在数据输入、表格编辑等场景中非常常见。它可以提高用户体验,让用户清晰地知道哪些单元格处于编辑状态。在表格应用、电子表格软件、在线编辑工具等场景中广泛应用。

对于腾讯云的相关产品,可以考虑使用腾讯云的云服务器(CVM)作为后端服务器,结合腾讯云的对象存储(COS)来存储表格数据。同时,可以使用腾讯云的CDN加速服务,提高用户访问表格的速度和稳定性。

腾讯云云服务器(CVM)产品介绍:https://cloud.tencent.com/product/cvm 腾讯云对象存储(COS)产品介绍:https://cloud.tencent.com/product/cos 腾讯云CDN产品介绍:https://cloud.tencent.com/product/cdn

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

个人永久性免费-Excel催化剂功能第76波-图表序列信息维护

具体功能实现 使用方法为先选择一个需要分析的图表,将其图表内的各系列对象属性遍历到Excel智能表中供查阅和修改。然后智能表内容对其进行修改完成,再生新回写至原图表中。...选择系列引用数据的单元格地址 【系列颜色】列可灵活配置多种格式的颜色表示,最终在更新系列内容,只会使用此列上的单元格填充颜色,而不用其单元格内容。...具体可供实现的方式有: 可直接使用菜单单元格填充色来更改填充颜色 可直接使用单元格样式来更改填充颜色 可直接复制单元格填充色粘贴到指定位置,无需输入颜色值 可复制Html颜色值到对应单元格,自动生成单元格填充色...步骤:点击更新图表系列 经过前面的系列属性重新设置,即可进行回写更新系列属性内容。 若更新,有部分额外属性未能更新到位,可自行选择对应的系列进行微调,如下图更新,出现了多余的线条。...更新了系列颜色的图表效果 选择无线条即可恢复原样式 结语 精美图表,是一种数据艺术,插件给大家提供了一些小小便利,可以方便研究其他人的图表作品,同时,对图表制作过程可能有些有些许的效率提升,如修改默认颜色为指定颜色

1.4K30

Excel事件(二)工作表事件

示例一 更改单元格的数据,弹窗显示更改单元格地址。(注意事件的代码不需要去运行)。...所以用户修改单元格的内容,先触发了代码运行。要先禁止事件。让中间的代码去添加“内容已更改”标识。此时因为禁止事件而不会触发,修改完之后再恢复事件开启即可。...示例 平时使用excel如果多列数据,选某个单元格的数据容易选错行。那么下么就通过selectchange事件来实现,选中一个单元格,所在行的单元格填上颜色。...,触发selectchange事件,首先cells.Interior.ColorIndex = xlNone表示取消所有单元格(cells)的底色,(如果没有这一句代码,触发事件颜色会保留。)。...再更改别的单元格颜色也会跟着更改。 大家可以尝试下让选中的单元格所在的行和列都标注颜色。 五、activate事件 工作表事件,图表工作表或嵌入式图表触发activate激活事件。

3.5K10
  • excel常用操作大全

    当你放开鼠标左键,一切都变了。 如果您在原始证书编号添加19,请在B1单元格中写入:=A1 '13 ',然后按回车键。 2.如何在文件下拉窗口底部设置最近运行的文件名数量?...打开“工具”,选择“选项”,然后选择“常规”,并在“最近使用的文件列表”下的文件编号输入框中更改文件编号。如果菜单中未显示最近使用的文件名,请取消“最近使用的文件列表”前的复选框。...请注意,点击“选项”按钮,格式列表框下有六个“应用格式类型”选项,包括“数字”、“边框线”和“字体”。如果没有选择一个项目,则在应用表格样式不会使用它。 18、如何快速复制单元格格式?...要取消,请选择中文文本框,弹出菜单,选择“设置文本框格式”“颜色和线条”,然后选择“线条”-“颜色”-“无线条颜色”。 20、如何快速输入数据序列?...但这也带来了一个问题,那就是,如果连颜色和底纹都印成了黑白,桌子的可视性就会大大降低。解决方法是:选择文件\页面设置\工作表,并在“打印”栏中选择“单色打印单元格”选项。

    19.2K10

    还在为选择办公软件而烦恼吗?不妨试试ONLYofficeV8.0

    .查看版本历史记录,只需单击即可选择恢复任何以前的版本. 6.改善团队工作流程 与您的团队在线协作处理文档:选择适合的共同编辑模式——在键入时快速显示所有更改,或者仅严格显示保存更改。...留下并分类批注评论,并在内置聊天或Telegram中讨论该流程。使用追踪修订模式和预览功能了解在接受或拒绝更改的文档外观。 7.轻松对比文档 快速对比或合并两篇文档,通过审阅模式查看不同之处。...访问、分享电子表格,并链接至特定区域;实时共同编辑;在单元格上留下评论;与协作者在线聊天。进行这些操作您完全无需离开编辑器。让其他用户在编辑电子表格应用自己的过滤条件,而又不会打扰协作作者。...2.紧跟用户的创意 使用钢笔或荧光笔工具在幻灯片中创建手绘图形,还可选择所需的颜色与线条粗细。...用户可以选中单元格区域,并将第一个单元格的格式复制到其他单元格,并用一系列值进行填充。这样在插入大量相同数据,可以提升工作效率。

    15910

    Vs Code 2020年6月(1.47版)

    编辑 正则表达式替换中的大小写更改 VS Code现在支持在编辑器中进行查找/替换更改正则表达式匹配组的大小写。...现在,未保存的本地更改可以通过扩展序列化并在重新打开工作区恢复。 撤消/重做增强 我们增加了对扩展的支持,以有助于撤消/重做堆栈。扩展现在可以控制哪些操作是不可撤消的。...:单元格悬停单元格的背景颜色 notebook.cellInsertionIndicator:笔记本电池插入指示灯的颜色 notebook.focusedCellBackground:单元格聚焦单元格的背景色...notebook.focusedCellBorder:单元格聚焦单元格顶部和底部边框的颜色 notebook.focusedCellShadow:聚焦细胞细胞阴影的颜色 notebook.focusedEditorBorder...:Notebook单元格编辑器边框的颜色 ?

    4.5K30

    Excel图表学习69:条件圆环图

    根据单元格包含的字母“R”、“Y”或“G”将它们填充为红色、黄色和绿色。这在工作表中很容易做到,但在图表中没有像这样更改颜色的机制。 可以使用VBA来实现,但本文使用了工作表公式。...图2 选择下方单元格区域中添加一个标题为“一”的列,其每个单元格的值均为1。然后,插入一个圆环图,如下图3所示。可以看到,“切片”列和“颜色”列用于类别和标签,而“一”列用于圆环切片值。...图4 下面,先将图表所有切片颜色变成灰色,以方便在填充颜色查看位置。单击选择所有切片,填充颜色为灰色,如下图5所示。 ? 图5 接着,逐切片填充颜色。...这意味着,如果自定义了绘制的数据,然后更改数据以便重新格式化元素(图表系列或数据标签)引用不同的单元格区域,那么部分或全部格式将恢复为其默认值。...图12 当在工作表中更改每个切片的颜色,图表也相应地反映了该变化,如下图13所示。 ? 图13 再次修改工作表中的颜色,图表也相应更新,如下图14、图15所示 ? 图14 ?

    7.8K30

    openpyxl | Python操作Excel利器

    * #先设置表格的样式模板,再将模板赋予需要更改样式的单元格 #设置样式模板,这里只列举一部分常用的样式 #表格边缘线的样式,thin表示有框线,框线颜色为黑色 thin = Side(border_style...,颜色为黄色 yellow_fill = PatternFill(fill_type='solid',fgColor='FFD700') #设置字体在表格中的位置,设置字体为上下区中,字符长度超过表格宽度自动换行...alignment_wrap_content = Alignment(wrap_text=True,horizontal='center',vertical='center') #设置完成,改变单元格样式...cell.border = self.all_border cell.alignment = self.alignment_wrap_content #如果要设置的单元格为合并的,那么多个单元格样式都要设置...设置超链接 #设置这个单元格的超链接为 跳转到 test工作簿 Sheet表格的 A1单元格 cell.hyperlink = 'test.xlsx#Sheet!A1' 实战 原始数据 ?

    2.1K10

    数据分析篇 | 如何配置数据分析利器Jupyter Notebook?

    如何在启动指定目录? 如何安装扩展插件? 如何修改颜色主题? 如何让一个单元格显示多个输出? 如何不使用科学计数法显示数字? 如何添加与删除虚拟环境?...如何修改颜色主题? 不喜欢默认界面,或想换下口味,jupyter-themes 可以更改颜色主题。...恢复默认主题, 所有主题都不喜欢?用 jt -r 即可恢复还原默认主题。 ? 4. 如何让一个单元格显示多个输出? 正常情况下, 一个单元格只显示一个输出结果; ?...移动到上一个单元格:↑ 移动到下一个单元格:↓ 复制光标所在整行:Ctrl + C,注:不要选择任何内容 剪切光标所在整行:Ctrl + X,注:不要选择任何内容 其它复制、剪切、黏贴、重做、取消等快捷键与...L 扩展选择当前单元格上方单元格:Shift + ↑ 扩展选择当前单元格下方单元格:Shift + ↓ 合并多个单元格:Shift + M 重启内核:00,即连续按两次零 注:以上快捷键字母不分大小写

    2.3K30

    循环结构For...Next语句

    For...Next语句基础知识 下面先看下for...next语句的的完整语法结构,其中[ ]中的内容是可以选择性省略的部分。...思路是利用for...next循环得到1至100以内所有的偶数,并在每次循环加到一个固定的变量上,代码如下: (这里需要先说明代码中的 j=j+i 这个表达式,是现在的i和j的值相加,重新赋值给j,...所以全部显示为蓝色的过程,其实就是循环了50次让A1单元格到A50单元格的背景颜色全部显示为蓝色。而去除颜色,就是通过循环让A1到A50单元格背景色都显示白色。(50次为随意设置的。)...如果单元格不是空值,就不退出循环,就继续执行循环中的让背景颜色变蓝色代码,最后结果就是只覆盖了非空的单元格。...这里需要注意下更改背景颜色的代码,不要写在判断语句之前,否则第一个空值的单元格会变成蓝色,程序才退出循环。

    1.9K20

    Spread for Windows Forms高级主题(4)---自定义用户交互

    当用户选定一个区域内的单元格,该区域的单元格可以拥有一个单独的背景色和前景颜色,用来区分表单内的其他单元格。...当通过编程设置了一个新的活动单元格,请使用SetActiveCell方法中的布尔型参数clearSelection清除所有的选择。...当选择了一些内容,renderer将会改变选择的背景色。在不使用该renderer的情况下,你可以为选择的背景和文本指定特定的颜色。或者你还可以同时使用renderer的外观以及你自定义的颜色。...下图依次展示了使用默认renderer样式选择单元格的外观,使用设置颜色选择单元格的外观,和既使用renderer样式,又使用自定义颜色单元格的外观。 ?...如果没有为选择设置颜色,则默认颜色是Color.FromArgb(100, SystemColors.Highlight)。 被选择单元格的绘制方式 取决于SheetView类中的不同属性。

    1.8K60

    Matplotlib 中文用户指南 3.2 图像教程

    对于内联绘图,在单元格下方的单元格中输出绘图的命令不会影响绘图。 例如,从创建绘图的单元格下面的单元格更改颜色表是不可能的。...In [8]: plt.imshow(lum_img) 现在,亮度(2D,无颜色)图像应用了默认颜色表(也称为查找表,LUT)。 默认值称为jet。 有很多其他方案可以选择。...如果你在一个单元格中创建了imgplot,你不能在以后的单元格中调用set_cmap(),并且改变前面的绘图。 请确保你在相同单元格中一起输入这些命令。plt命令不会更改先前单元格的绘图。...如果你更改并切换到不同的颜色映射,则不会自动更改 - 你必须重新创建绘图,并再次添加颜色条。...这就是当你放大图像,你的图像有时会出来看起来像素化的原因。 当原始图像和扩展图像之间的差异较大,效果更加明显。 让我们加载我们的图像并缩小它。 我们实际上正在丢弃像素,只保留少数几个像素。

    1.5K40

    Worksheet工作表对象属性

    一、name属性 上节介绍引用工作表对象,已介绍过name属性,它是工作表标签的名称。 name属性是可修改属性,代码相对简单,这里顺带说下工作表标签颜色更改。...三、usedrange属性 工作表的usedrange属性表示工作表中已经使用的单元格,返回单元格对象。...代码中sheet1.usedrange属性得到一个单元格对象,即range("a1:c5"),然后将它的单元格interior属性的颜色设置为蓝色。...(visbile属性可以通过vba代码更改,也可以在工作表的属性窗格中更改visible属性。) 属性值通常有三个值可供选择: 属性值-1为显示隐藏的工作表。...例如表格1的codename属性为sheet1,而原始数据表的codename属性为sheet4。

    2.7K30

    2022年最新Python大数据之Excel基础

    填充序号,此时数据已经排序,只需要在第一个单元格输入”1”,再用拖动复制的方法,即可快速填充排名。 按颜色排序 在数据分析前期,可以将重点数据标注出来,如改变单元格填充底色、改变文字颜色。...•选择添加按钮,添加数据源 输入坐标名称和数据。 •选择要在图表上显示的数据信息,点击编辑对周标签进行编辑 点击确定,生成图表 图表介绍 图表创建完成。...用户如果发现创建的图表与实际需求不符,还可以对其进行适当的编辑 更改图表类型 1.图表创建完成,发现图表类型不能满足可视化分析的需求,可以更改图表的类型 在图表上右键点击,唤出菜单,选择更改图表类型...•选择你要修改的图表类型,点击确定,图表类型更换完成 1.有些情况下,需要把某个数据系列设置为另一种图表类型 •同样右键点击,唤出下拉菜单,点击更改图表类型。...数据透视表字段布局 概述 透视表成功创建,需要对字段进行合理设置,灵活更改数据展现形式,用不同的视角进行数据分析 必要,还可以结合图表,可视化展现、分析数据。

    8.2K20

    Excel揭秘26:解开“属性采用图表数据点”的功用(2)

    下面的图12所示的第一个显示了默认图表,我用金色和绿色填充颜色突出显示了两个单元格。...图12 选中“属性采用图表数据点”设置 (True),自定义格式(条形填充颜色和标签)随着数据区域范围的变化跟随点变化。...下面的图13所示的第一个显示了默认图表,我用金色和绿色填充颜色突出显示了两个单元格。...在第四个图表中,我更改了图表的原始数据区域范围,将值和系列名称向右移动一列。由于“属性采用图表数据点”设置为真,图表中的绿色条和标签已从第二个系列移至第一个,而金色条和标签已从图表中消失。 ?...在第四个图表中,我更改了图表的原始数据区域范围,将值和系列名称向右移动一列。由于“属性采用图表数据点”设置为假,自定义格式未在图表中移动,第一个系列为金色条形和标签,第二个系列为绿色条形和标签。 ?

    2.8K40

    《Python for Excel》读书笔记连载17:使用读写器包进行Excel文件操作(上)

    要获取单元格值,需要打开工作簿,其中data_only=True,其默认值为False,这将返回单元格的公式: 使用OpenPyXL写入 OpenPyXL在内存中构建Excel文件,并在调用save...方法写出该文件。...查找颜色的十六进制值 要在Excel中找到所需的颜色的十六进制值,单击用于更改单元格填充颜色的“填充”下拉列表,然后选择“更多颜色”,选择颜色并在“自定义”选项卡中读取其十六进制值。...对于主要包含数据和公式的格式化单元格的简单Excel文件来说,这是非常强大的,但是当电子表格中有图表和其他更高级的内容,这又是有限的,因为OpenPyXL将更改它们或完全删除它们。...例如,当删除行的内容(通过单击delete键)而不是删除行本身(通过右键单击并选择delete),可能会发生这种情况。

    3.8K20

    Excel图表学习45: 裁剪图表

    如下图1所示,在使用柱形图制作图表,如果有些柱形表示的数字很大,可以截断该柱形,使图表看起来更美观。 ? 图1 注意,将图表裁剪或者是将Y轴的图形截断会让人产生误解或者混淆,因此,请谨慎使用。...步骤1:整理数据 原始数据如下图2所示的单元格区域A7:A14。 ? 图2 现在,将数据列拆分成2部分,一部分用于绘制裁剪点值以下的图形,另一部分用于绘制裁剪点值以上的图形。...图4 步骤3:添加标记系列 选择单元格区域E6:E14,复制数据。选择图表,单击功能区选项卡“开始——粘贴——选 择性粘贴”,出现如下图5所示的对话框。 ? 图5 单击“确定”,结果如下图6所示。...图6 在该系列上单击右键,选择更改系列图表类型”,在图7所示的“更改图表类型”对话框 中,将该系列更改为“带数据标记的折线图”。 ? 图7 将该系列的线条设置为“无线条”,结果如下图8所示。...选择底部的柱形系列,单击右键,单击“添加数据标签”。 选择数据标签,单击右键,选择“设置数据标签格式”,将数据标签设置为: ? 图11 设置字体颜色为“白色”,删除图例,结果如下图12所示。 ?

    2.3K30

    Excel如何“提取”一列中红色单元格的数据?

    Excel技巧:Excel如何“提取”一列中红色单元格的数据? ? 场景:财务、HR、采购、商务、后勤部需要数据整理的办公人士。 问题:Excel如何“提取”一列中红色单元格的数据?...解答:利用单元格颜色排序搞定。 具体操作方法如下:第一步:进行颜色排序 将鼠标放置在数据区的任意单元格,单击“排序”按钮(下图1处),对下列表中“型号”列进行“单元格颜色”按红色进行排序。...第二步:复制红色单元格数据 将红色单元格的数据复制到D列。黏贴可以选择选择性黏贴—值”。效果如下: ? 是不是很快搞定了客户朋友的问题。但这样有个问题,破坏了数据原有的顺序。这时候怎么办呢?...按颜色排序,复制出数据,序号的顺序被打乱。 ? 第三步:按序号在升序排序。直接光标停在序号列上,单击“升序”按钮,即可恢复到排序前的顺序。(下图中AZ为快捷升序按钮) ?...升序,效果如下: ? 总结:辅助列是Excel中常见的解决问题的方法和思路。而序号是强烈推荐大家工作添加的玩意。标识数据表的唯一性。当然这个案例有个问题,就是如果数据是更新的。

    5.7K20

    个人永久性免费-Excel催化剂功能第52波-相同内容批量合并单元格,取消合并单元格并填充内容

    用了合并单元格,同时提供了一剂解药,反合并单元格,将合并单元格打散恢复规范的数据。...用户永远是懒惰的,多个步骤,可能就有些受不了,回归正传,谈谈实际的场景,如下图所示: 原始数据中一些数量指标,或还有更多的其他指标,在服饰行业中,SKU由款号+颜色+尺码组成。...使用过程中,尽量选择有合并单元格,需要取消合并单元格的区域,不要全选表格等操作,否则程序遍历单元格太多可能会假死机。 ? 原格式 ? 功能同样适用于多行多列的情况 ?...按列的意思为,判断相同的内容仅会按单列的顺序由上而下来对比,而不会多列单双同的单元格亦合并在一起,一般现实中规范的数据结构乃是一列数据代表一种属性或指标,不同列之间没有强关联性,如数量、金额、商品名称、...,更想带给大家在最合适的时候用最合适的功能,而不是因一的方便,致使后续的工作充满了许多的难处。

    99820

    “Excel格式”最风骚玩法,炫技加薪就靠它了

    我们重点要学习的就是最后一项「自定义」格式,选择「自定义」格式,在右侧的「类型」编辑框,可以输入自定义格式代码。同时,可以看到下面有很多系统预设的代码。...如果只使用单个@,作用是引用原始文本;如果使用多个@, 则可以重复文本。 ? 注意:@符号的位置决定了Excel输入的数字数据相对于添加文本的位置 ?...10、颜色 注释:用指定的颜色显示字符。可有八种颜色可选:红色、黑色、黄色、绿色、白色、蓝色、青色和洋红。...比如我们编写代码: “微软股份有限公司@” 现在,单击刚才选中的单元格区域中一个单元格并在其中输入“销售部”几个字,按下回车键,这个单元格中出现的是“微软股份有限公司销售部”。...当单元格中数字满足指定的条件,Excel 可以自动将条件格式应用于单元格。 可以根据单元格内容判断后再设置格式。条件格式化只限于使用三个条件,其中两个条件是明确的,另个是“所有的其他”。 ? ?

    2.4K30

    opencv+python制作硬核七夕礼物

    重磅干货,第一间送达 ? 来源:OpenCV视觉实践 ? 明天就是七夕了! 如果有对象,祝早生贵子!没有对象,祝早结连理!...(搞笑一下,祝大家幸福美满吧,嘿嘿嘿) 给大家准备了一份已经写好的代码,利用python+opencv+openpyxl,opencv实现读取图片像素颜色,然后openpyxl自动填充Excel表格对应单元格背景颜色...配置完成就是导入我们需要的包了,这儿不需要过多了解: #导入opencv和openpyxl import openpyxl import cv2 as cv import numpy as np from...所以还需要我们手动更改一下单元格的大小,其实openpyxl也是可以做到的,但我也是第一天用openpyxl,也不熟练,能动手就动手吧,毕竟最麻烦的已经完成了。 还有还有!...还有,别告诉你对象是用代码生成的,告诉她: “这是我一个一个单元格填充了一个月颜色的成果,我是爱你的,么么哒,带上身份证,咱们去看电影吧~” THE END 兄弟们,看在我熬夜调BUG的份上!

    93010
    领券