使用 Google 表格下拉菜单更改单元格背景颜色而不是文本

Posted

技术标签:

【中文标题】使用 Google 表格下拉菜单更改单元格背景颜色而不是文本【英文标题】:Using Google Sheets Dropdown to Change the Cell Background Color NOT Text 【发布时间】:2019-10-15 17:09:32 【问题描述】:

我希望用户能够使用单元格内的下拉菜单根据预设的 5 种颜色列表更改单元格的背景颜色。但是,他们将在单元格中插入自己的文本。

那么有什么方法(使用 Google Apps 脚本很好)让下拉列表读取 5 种颜色(黄色、红色、紫色等),当他们选择它时,单元格中的文本保持不变并且背景颜色更改为他们选择的内容?用户文本可以是任何内容,因此我不能为此使用条件格式。谢谢!

【问题讨论】:

我将颜色选择放在侧边栏上,然后在活动单元格上运行它。这很容易做到。 @Cooper 我目前将它设置在紧邻用户可以输入自己的文本的列中,并在下拉列表中选择颜色。然后代码使用他们的选择来设置最终颜色。这工作得很好,但是,我收到的反馈是每个人都希望下拉菜单位于他们可以选择颜色的同一个单元格中,因为它会“不那么混乱”。恐怕对于技术难度更高的用户来说,使用侧边栏也不会那么棘手。 【参考方案1】:

使用侧边栏中的下拉菜单更改当前单元格的背景颜色。

您需要创建一个“选项”表,然后输入您要使用的颜色。在第一个单元格中始终放置“选择颜色”之类的内容;

代码.gs:

function bgcolorSelectionForActiveCell(color) 
  SpreadsheetApp.getActiveRange().setBackground(color);


function getSelectOptions() 
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('Options');
  var rg=sh.getDataRange();
  var vA=rg.getValues();
  var options=[];
  for(var i=0;i<vA.length;i++)
  
    options.push(vA[i][0]);
  
  return vA;


function launchColorSideBar() 
  var userInterface=htmlService.createHtmlOutputFromFile('aq5').setTitle('Color Side Bar');
  SpreadsheetApp.getUi().showSidebar(userInterface);

aq5.html:

<!DOCTYPE html>
<html>
  <head>
  <base target="_top">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    $(function() 
      google.script.run
      .withSuccessHandler(function(vA)
        var select = document.getElementById("sel1");
        select.options.length = 0; 
        for(var i=0;i<vA.length;i++) 
          select.options[i] = new Option(vA[i][0],vA[i][0]);
        
      )
      .getSelectOptions();
    );

    function setBGColor() 
      google.script.run.bgcolorSelectionForActiveCell($('#sel1').val());

    
    console.log("My Code");
  </script>
  </head>  
  <body>
    <select id="sel1" onChange="setBGColor();"></select>
  </body>
</html>

【讨论】:

谢谢。如果没有像我正在寻找的解决方案,绝对是我会考虑的一种方法。 使用验证的问题是颜色字符串会替换单元格中的文字。 是的,我希望能找到解决办法。希望有另一种方法可以在不使用验证的情况下向单元格添加下拉菜单。 验证的重点是提供可接受的选择。 @hunter21188 没有办法避免验证覆盖文本,最好的选择是像以前一样将它们放在单独的单元格中,或者使用库珀的解决方案。

以上是关于使用 Google 表格下拉菜单更改单元格背景颜色而不是文本的主要内容,如果未能解决你的问题,请参考以下文章

iOS UITableView:更改表格的背景颜色会覆盖单元格的背景颜色

使用 CSS,如何根据我悬停的单元格更改表格行的背景颜色?

使用jQuery更改表格单元格的背景颜色

excel按背景颜色显示数据多少

使用html内容更改matlab中表格单元格的背景颜色

wpf中鼠标放到combobox的下拉菜单选项上,该选项就会改变背景颜色,怎么取消变色?