如何获取Google Sheets中ID对应相邻单元格物品名称实现删除确认

开发者阿泽

2026-8-19

解决容器绑定脚本中删除确认提示获取物品名称的问题

问题说明

我有一个容器绑定脚本和HtmlService侧边栏，表格B列存储ID、C列存储物品名称。在HTML输入框输入ID提交后，系统会删除匹配该ID的行。现在希望用confirm()实现删除确认提示，内容为**"您确定要从库存中删除[物品名称]吗"**，但目前无法获取输入ID对应的物品名称。

原表格示例

Column B	Column C
ID	itemName
--	--
MUCH00000001	Item1
MUCH00000002	Item2
MUCH00000003	Item3
...	...

原GS脚本

var adjacentName = ??????

function showDeleteElectronics() {
  const ui = SpreadsheetApp.getUi();
  var deleteElectronicsForm = HtmlService.createTemplateFromFile('DeleteElectronicsHTML')
  deleteElectronicsForm.itemName = adjacentName;
  var html = deleteElectronicsForm.evaluate();
  html.setTitle("Elektronik Entfernen")
  ui.showSidebar(html);
}


function deleteElectronics(formObject) {
  var electronicsID = formObject.electronicsLocalID 
  var SS = SpreadsheetApp.openById("1GSzlzj7nHPIUt-RIJfsPFobtnLbuoXedtJk1x11BdT0");
  var SHEET = SS.getSheetByName("ElektronikBestand");
  var RANGE = SHEET.getDataRange();
  var DELETE_VAL = electronicsID;
  var LOCAL_ID = 1;

  function deleteItem(){
    
    var rangeVals = RANGE.getValues();
    
    //Reverse the 'for' loop.
    for(var i = rangeVals.length-1; i >= 0; i--){
      if(rangeVals[i][LOCAL_ID] === DELETE_VAL){
        
        SHEET.deleteRow(i+1); 
      };
    };
  };

  deleteItem();
}

原HTML代码

<div class="sidebarwrapper">
  
    <div class="xbuttonwrapper">
        <button class="xbutton" onclick="google.script.host.close()">
            <svg class="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 212.982 212.982" style="enable-background:new 0 0 212.982 212.982" xml:space="preserve"><path style="fill-rule:evenodd;clip-rule:evenodd" d="m131.804 106.491 75.936-75.936c6.99-6.99 6.99-18.323 0-25.312-6.99-6.99-18.322-6.99-25.312 0L106.491 81.18 30.554 5.242c-6.99-6.99-18.322-6.99-25.312 0-6.989 6.99-6.989 18.323 0 25.312l75.937 75.936-75.937 75.937c-6.989 6.99-6.989 18.323 0 25.312 6.99 6.99 18.322 6.99 25.312 0l75.937-75.937 75.937 75.937c6.989 6.99 18.322 6.99 25.312 0 6.99-6.99 6.99-18.322 0-25.312l-75.936-75.936z"/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/></svg>
        </button>
    </div>
  
    <div class="titlewrapper">
        <img class="ctlogotitle" src="https://i.imgur.com/d1VMjvs.png">
        <h1 class="title">Elektronik <br> Entfernen</h1>
    </div>
  
    <div class="divider"></div>
  
    <form class="inputformwrapper" id="removeElectronicsFrom">
      
        <div class="inputblockwrapper">
            <div class="labelwrapper">
                <label class="requiredlabel" for="electronicsLocalID">Lokale ID</label>
            </div>

            <input class="inputfield" 
                type="text"
                placeholder="PREF00000001..."
                minlength="12"
                maxlength="12"                
                id="electronicsLocalID"
                name="electronicsLocalID"                    
                required>
        </div>

        <div class="confirmbuttonwrapper">
            <input class="confirmbutton" 
                type="submit" 
                value="Entfernen"                
                id="removeElectronics">
        </div>

    </form>

</div>

<script>
      document.querySelector("#removeElectronicsFrom").addEventListener("submit", function (e) {
          let confirmString = "Are you sure that you want to delete " + itemName + "?";
          e.preventDefault();
          if (confirm(confirmString)) {
            google.script.run.deleteElectronics(this);
            $('#removeElectronicsFrom').trigger("reset");
          } else {
            $('#removeElectronicsFrom').trigger("reset");
          }
      });
</script>

解决方案

核心逻辑：用户提交ID后，先调用服务器端脚本查询该ID对应的物品名称，拿到名称后弹出确认框，确认通过再执行删除操作。

修改后的GS脚本

function showDeleteElectronics() {
  const ui = SpreadsheetApp.getUi();
  var html = HtmlService.createTemplateFromFile('DeleteElectronicsHTML').evaluate();
  html.setTitle("Elektronik Entfernen");
  ui.showSidebar(html);
}

// 根据ID获取物品名称的新函数
function getItemNameById(id) {
  const SS = SpreadsheetApp.openById("1GSzlzj7nHPIUt-RIJfsPFobtnLbuoXedtJk1x11BdT0");
  const SHEET = SS.getSheetByName("ElektronikBestand");
  const data = SHEET.getDataRange().getValues();
  
  // 遍历查找匹配的ID，返回对应C列的物品名称
  for (let i = 2; i < data.length; i++) { // 从第3行开始，跳过表头和分隔行
    if (data[i][1] === id) { // B列对应索引1
      return data[i][2]; // C列对应索引2
    }
  }
  return "未知物品"; // 未找到ID时的默认值
}

function deleteElectronics(formObject) {
  const electronicsID = formObject.electronicsLocalID;
  const SS = SpreadsheetApp.openById("1GSzlzj7nHPIUt-RIJfsPFobtnLbuoXedtJk1x11BdT0");
  const SHEET = SS.getSheetByName("ElektronikBestand");
  const data = SHEET.getDataRange().getValues();
  
  // 倒序遍历删除，避免行号偏移问题
  for (let i = data.length - 1; i >= 2; i--) {
    if (data[i][1] === electronicsID) {
      SHEET.deleteRow(i + 1); // 表格行号比数组索引大1
    }
  }
}

修改后的HTML代码

<div class="sidebarwrapper">
  
    <div class="xbuttonwrapper">
        <button class="xbutton" onclick="google.script.host.close()">
            <svg class="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 212.982 212.982" style="enable-background:new 0 0 212.982 212.982" xml:space="preserve"><path style="fill-rule:evenodd;clip-rule:evenodd" d="m131.804 106.491 75.936-75.936c6.99-6.99 6.99-18.323 0-25.312-6.99-6.99-18.322-6.99-25.312 0L106.491 81.18 30.554 5.242c-6.99-6.99-18.322-6.99-25.312 0-6.989 6.99-6.989 18.323 0 25.312l75.937 75.936-75.937 75.937c-6.989 6.99-6.989 18.323 0 25.312 6.99 6.99 18.322 6.99 25.312 0l75.937-75.937 75.937 75.937c6.989 6.99 18.322 6.99 25.312 0 6.99-6.99 6.99-18.322 0-25.312l-75.936-75.936z"/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/></svg>
        </button>
    </div>
  
    <div class="titlewrapper">
        <img class="ctlogotitle" src="https://i.imgur.com/d1VMjvs.png">
        <h1 class="title">Elektronik <br> Entfernen</h1>
    </div>
  
    <div class="divider"></div>
  
    <form class="inputformwrapper" id="removeElectronicsFrom">
      
        <div class="inputblockwrapper">
            <div class="labelwrapper">
                <label class="requiredlabel" for="electronicsLocalID">Lokale ID</label>
            </div>

            <input class="inputfield" 
                type="text"
                placeholder="PREF00000001..."
                minlength="12"
                maxlength="12"                
                id="electronicsLocalID"
                name="electronicsLocalID"                    
                required>
        </div>

        <div class="confirmbuttonwrapper">
            <input class="confirmbutton" 
                type="submit" 
                value="Entfernen"                
                id="removeElectronics">
        </div>

    </form>

</div>

<script>
document.querySelector("#removeElectronicsFrom").addEventListener("submit", function (e) {
    e.preventDefault();
    const form = this;
    const electronicsID = form.electronicsLocalID.value;

    // 调用服务器端函数获取物品名称
    google.script.run.withSuccessHandler(function(itemName) {
        const confirmString = `您确定要从库存中删除${itemName}吗？`;
        if (confirm(confirmString)) {
            google.script.run.deleteElectronics(form);
            form.reset();
        } else {
            form.reset();
        }
    }).getItemNameById(electronicsID);
});
</script>

关键修改说明

新增getItemNameById函数：负责根据输入的ID查询表格中对应的物品名称，客户端通过google.script.run调用该函数获取数据。
修改HTML提交事件逻辑：先阻止表单默认提交，获取输入的ID后调用服务器端查询函数，拿到名称后再弹出确认框，确认后执行删除。
优化GS删除逻辑：简化嵌套函数结构，明确遍历起始行（跳过表头和分隔行），保持倒序删除避免行号偏移。

内容的提问来源于stack exchange，提问作者Rookie_Js

如何获取Google Sheets中ID对应相邻单元格物品名称实现删除确认

问题说明 #

原表格示例 #

原GS脚本 #

原HTML代码 #

解决方案 #

修改后的GS脚本 #

修改后的HTML代码 #

关键修改说明 #