如何在Apps Script中实现拉取谷歌表格数据仅显示末四位

针对你遇到的动态加载数据后JS处理无效的问题，有两种可行方案，分别从后端处理和前端异步回调入手：

方案一：后端（Code.gs）预处理数据（推荐） #

直接在拉取谷歌表格数据时完成隐藏处理，前端无需额外JS逻辑，效率更高。

修改你的Code.gs中的数据拉取函数，对敏感字段进行处理：

function getData() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("你的表名");
  const rawData = sheet.getDataRange().getValues();
  
  // 遍历数据，处理需要隐藏的列（示例为第2列，索引从0开始）
  return rawData.map(row => {
    const sensitiveValue = row[1]; // 替换为你的敏感数据所在列索引
    if (sensitiveValue && typeof sensitiveValue === 'string' && sensitiveValue.length >= 4) {
      // 用*替换前面的字符，只保留最后四位
      row[1] = '*'.repeat(sensitiveValue.length - 4) + sensitiveValue.slice(-4);
    }
    return row;
  });
}

这样前端拿到的就是已经处理好的数据，直接渲染表格即可，无需额外JS。

方案二：前端等待数据渲染完成后执行处理逻辑 #

如果需要保留原始数据在前端（比如后续有其他操作），可以在表格渲染完成后再执行隐藏逻辑。

修改你的Index.html中的JS部分，确保在数据渲染完成后再调用隐藏函数：

<!DOCTYPE html>
<html>
  <body>
    <table id="data-table"></table>
    <script>
      // 拉取数据并渲染表格
      google.script.run.withSuccessHandler(renderTable).getData();
      
      function renderTable(data) {
        const table = document.getElementById('data-table');
        // 生成表头
        const thead = document.createElement('thead');
        const headerRow = document.createElement('tr');
        data[0].forEach(header => {
          const th = document.createElement('th');
          th.textContent = header;
          headerRow.appendChild(th);
        });
        thead.appendChild(headerRow);
        table.appendChild(thead);
        
        // 生成表体
        const tbody = document.createElement('tbody');
        data.slice(1).forEach(row => {
          const tr = document.createElement('tr');
          row.forEach((cellValue, index) => {
            const td = document.createElement('td');
            // 给敏感列添加类名，方便后续选中
            if (index === 1) { // 替换为敏感数据所在列索引
              td.classList.add('sensitive-data');
            }
            td.textContent = cellValue;
            tr.appendChild(td);
          });
          tbody.appendChild(tr);
        });
        table.appendChild(tbody);
        
        // 表格渲染完成后执行隐藏逻辑
        hideSensitiveData();
      }
      
      function hideSensitiveData() {
        const sensitiveCells = document.querySelectorAll('.sensitive-data');
        sensitiveCells.forEach(cell => {
          const text = cell.textContent.trim();
          if (text.length >= 4) {
            cell.textContent = '*'.repeat(text.length - 4) + text.slice(-4);
          }
        });
      }
    </script>
  </body>
</html>

问题原因说明 #

你之前的静态代码生效，是因为页面DOM加载完成时表格数据已经存在，JS能直接找到单元格；而Apps Script中数据是通过google.script.run异步拉取的，DOM加载完成时表格还未渲染数据，此时执行隐藏逻辑找不到目标元素，因此无效。

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