Google Script 和 Google Sheets - 下拉以选择单元格并从侧边栏的输入中添加值答案

【问题标题】：Google Script and Google Sheets - Drop down to select cell and add value from input from sidebarGoogle Script 和 Google Sheets - 下拉以选择单元格并从侧边栏的输入中添加值
【发布时间】：2021-09-12 16:34:52
【问题描述】：

我一直在拼凑其他来源的脚本，感觉自己已经很接近了，但我无法独自完成最后的飞跃。只是给你一些背景

我正在 Google 表格中整理一个文档，我可以让学生输入来自现场足球比赛的特定值，这些值将在 OBS 上显示为我们视频广播的实时统计数据。我为篮球制作了一个非常简单的基于按钮的表格，效果非常好。 Picture of Google Basketball Sheet

足球是另一种野兽。我的概念是有一个侧边栏，其中我在下拉菜单中预选了一组名称，以及第二个下拉菜单，其中预选了统计类型的下拉菜单（匆忙，通过......）这两个下拉菜单会找到与名称行关联的单元格）和统计类型（列）以及为选定单元格添加值的输入字段。

我无法弄清楚如何让下拉菜单与特定单元格相关联，更不用说两个不同的下拉菜单了。如果这两个下拉菜单不可用，我很乐意制作一个与特定游戏相关联的按钮，然后下拉名称和输入字段就可以了。

到目前为止，我有一个下拉菜单，可以从 A 列中提取名称，但是当我选择一个时，什么也没有发生。我还有一个按钮，我可以将值发送到特定单元格，但它不会添加到原始单元格，它只是将单元格更改为“输入值”1

function ftball() {
  try {
    var output = HtmlService.createHtmlOutputFromFile('HTML_Sidebar');
    SpreadsheetApp.getUi().showSidebar(output);
  }
  catch(err) {
    Logger.log(err);
  }
}

function getNames() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Football");
  return sheet.getRange(1, 1, sheet.getLastRow(), 1).getValues(); // Retrieve values and send to Javascript
}

// Sets the value of A1 cell to value entered in the input field in the side bar!
function enterValue(number){
 var ss = SpreadsheetApp.getActive()
 var sheet = ss.getActiveSheet()
 sheet.getRange("B11").setValue(number + 1) 
}

以及侧边栏的 HTML

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <select id="mySelect" onchange="selectChange(this)">
    </select>
    <script>
      function selectChange(select) {
        google.script.run.changeSheet(select.value);
      }
      function playerNames(names) {
        var select = document.getElementById("mySelect");
        for( var i=0; i<names.length; i++ ) {
          var option = document.createElement("option");
          option.text = names[i];
          select.add(option);
        }
      }
      (function () { google.script.run.withSuccessHandler(playerNames).getNames(); }());
    </script>
    <button onclick='f1()'>Select Athlete Name</button>
       </br>
    <!-- Create a input field to except a value form user, in this case there name -->
    Enter Value:
    <input type="number" id="number"><br>
    <!-- Create a button to send the value to the spreadsheet -->
    <button onclick='sendValue()'>Send Value</button>
<script>

  function f1() {
    google.script.run.getAddress();
  }

  function sendValue(){
   //Get the value of the input field 
   var number = document.getElementById("number").value
   //Log the value of input field in the web browser console (usually used for debugging)
   console.log(number)
   //Send the value of the text field as a arugment to the server side function.
   google.script.run.enterValue(number)
  }
</script>

  </body>
</html>

【问题讨论】：

标签： javascript google-apps-script google-sheets

【解决方案1】：

我可以使用我自己的示例数据从您的数据中创建一些东西，但不确定这是否是您想要的，但我尝试调整以适应我在您的帖子中理解的任何内容。请参阅下面的输出和代码。

代码.gs：

function ftball() {
  try {
    var output = HtmlService.createHtmlOutputFromFile('HTML_Sidebar');
    SpreadsheetApp.getUi().showSidebar(output);
  }
  catch(err) {
    Logger.log(err);
  }
}

function getData() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Football");
  return [sheet.getRange(1, 1, sheet.getLastRow(), 1).getValues().filter(String),  // Retrieve names and
          sheet.getRange(1, 2, sheet.getLastRow(), 1).getValues().filter(String)]; // Stat types then send to Javascript (remove blank cells)
}

function enterValue(number, name, stat){
  var ss = SpreadsheetApp.getActive();
  var sheet = ss.getActiveSheet();
  
  var namesLength = sheet.getRange(1, 1, sheet.getLastRow(), 1).getValues().filter(String).length;
  var statsLength = sheet.getRange(1, 2, sheet.getLastRow(), 1).getValues().filter(String).length;
  // where your name headers for the table starts (C6)
  var nameStartRow = 6;
  var nameStartCol = 3;
  // where your stat headers for the table (D5)
  var statStartRow = 5;
  var statStartCol = 4;
  // get list of names
  var names = sheet.getRange(nameStartRow, nameStartCol, namesLength, 1).getValues().flat();
  var stats = sheet.getRange(statStartRow, statStartCol, 1, statsLength).getValues().flat();
  // find the position by adjusting the index of name/stat to where the list starts
  var namePosition = names.indexOf(name) + nameStartRow;
  var statPosition = stats.indexOf(stat) + statStartCol;
  // get previous value, assign 0 if blank.
  var previousValue = sheet.getRange(namePosition, statPosition).getValue() || 0;
  sheet.getRange(namePosition, statPosition).setValue(parseInt(previousValue) + parseInt(number));  
}

HTML_Sidebar.html：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <select id="mySelectNames"></select>
    <select id="mySelectStats"></select><br>
    Enter Value:
    <input type="number" id="number"><br>
    <button onclick='sendValue()'>Send Value</button>
    <script>
      function setOptions([names, stats]) {
        // set both names and stats drop down
        var select = document.getElementById("mySelectNames");
        for( var i=0; i<names.length; i++ ) {
          var option = document.createElement("option");
          option.text = names[i];
          select.add(option);
        }
        // set default value to first option
        select.selectedIndex = 0;

        var select2 = document.getElementById("mySelectStats");
        for( var i=0; i<stats.length; i++ ) {
          var option2 = document.createElement("option");
          option2.text = stats[i];
          select2.add(option2);
        }
        select2.selectedIndex = 0;
      }
      function sendValue(){
        // send the values of name, stat and number then set as value
        var number = document.getElementById("number").value;
        var name = document.getElementById("mySelectNames").value;
        var stat = document.getElementById("mySelectStats").value;

        //Send the value of the text field as a arugment to the server side function.
        google.script.run.enterValue(number, name, stat);
      }
      (function () { google.script.run.withSuccessHandler(setOptions).getData(); }());
    </script>
  </body>
</html>

输出：

注意：

我修改了您的 html 和应用程序脚本。但我希望它接近您想要实现的目标。
这里的重要一点是如何找到在给定名称和统计信息的情况下放置值的位置。这就是我认为您可以根据自己的数据和想要的输出使用和修改的方式。
代码需要不填充 A 和 B，因此表格有点偏右。但如果我们确切地知道名单和统计数据，就可以避免这种情况。

【讨论】：

哇，这太棒了。我希望添加的一件事情是否有可能发送的值能够进行数学运算而不是替换单元格中的值。例如，詹姆斯上场比赛跑了 5 码，下一场比赛他又跑了 6 码，所以詹姆斯将显示 11 码。
那是可行的。我已经调整了脚本并更新了输出。我只是先获取单元格的值，然后在那里添加新数字。 @AndrewDunn，请检查。
工作完全如我所愿。谢谢！
不客气@AndrewDunn。下一次，如果您可以为此类问题提供预期的输出，那就更好了。我很幸运能根据你的篮球表理解你的观点。很高兴能够为您提供您想要的。祝你好运。