实现Google表格数据同步更新HTML表格并高亮新增行

一、核心修改方向 #

• 定期调用Google Apps Script接口拉取最新数据，避免整页刷新
• 缓存历史数据行数，对比识别新增行并添加红色背景样式
• 修复原代码中DataTable初始化、定时器调用的错误用法

二、修改后的Code.gs #

仅新增返回数据行数，方便前端对比判断新增行：

function getData1(){
  var spreadSheetId = ""; // 填入你的Google表格ID
  var dataRange     = "Data!A2:N"; // 数据范围
 
  var range   = Sheets.Spreadsheets.Values.get(spreadSheetId,dataRange);
  var values  = range.values || []; // 处理空数据场景
  return {
    data: values,
    rowCount: values.length // 返回当前数据行数，用于对比
  };
}

三、前端代码修改 #

1. HTML（统一表格ID） #

原代码存在表格ID混用（datatable/data-table），需统一为data-table：

<table id="data-table" class="table table-striped table-sm table-hover table-bordered"></table>

2. CSS（新增红色背景样式） #

添加专门的新增行样式：

#data-table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  color: black;
  width: 100%;
}

#data-table td,
#data-table th {
  border: 1px solid #ddd;
  padding: 8px;
}

#data-table tr:nth-child(even) {
  background-color: #f2f2f2;
}

#data-table tr:hover {
  background-color: #ddd;
}

#data-table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: teal;
  color: white;
}

/* 新增行红色背景 */
#data-table tr.new-row {
  background-color: #ffcccc !important;
}

3. JavaScript（实现自动刷新与新增行标记） #

修复定时器逻辑，新增数据对比与样式添加逻辑：

// 缓存历史数据行数和表格实例
let previousRowCount = 0;
let dataTableInstance = null;

// 初始化表格
function initTable(data) {
  dataTableInstance = $('#data-table').DataTable({
    data: data.data,
    columns: [
      {"title":"Task"},
      {"title":"Pending"},
      {"title":"Completed"},
      {"title":"Link",
        "render": function(data, type, row, meta){
          if(type === 'display' && data){
            data = `<a href="${data}" target="_blank">${data}</a>`;
          }
          return data || '';
        }
      }
    ],
    destroy: true // 允许重复初始化表格
  });
  previousRowCount = data.rowCount;
}

// 刷新数据并标记新增行
function refreshData() {
  google.script.run.withSuccessHandler(function(newData) {
    const hasNewRows = newData.rowCount > previousRowCount;
    
    // 更新表格数据
    dataTableInstance.clear();
    dataTableInstance.rows.add(newData.data);
    dataTableInstance.draw();
    
    // 为新增行添加红色背景
    if(hasNewRows) {
      const newRowStartIndex = previousRowCount;
      $('#data-table tbody tr').slice(newRowStartIndex).addClass('new-row');
      previousRowCount = newData.rowCount;
    }
  }).getData1();
}

// 页面加载完成后初始化，每10秒刷新一次
$(document).ready(function(){
  google.script.run.withSuccessHandler(initTable).getData1();
  setInterval(refreshData, 10000); // 可调整刷新间隔（单位：毫秒）
});

四、关键说明 #

• 刷新间隔：setInterval(refreshData, 10000)表示每10秒拉取一次数据，可根据需求修改时间
• 新增行识别：通过对比前后数据的行数差，精准定位新增行并添加样式
• 兼容性：添加空数据判断，避免表格渲染出错；使用destroy: true解决重复初始化问题

内容的提问来源于stack exchange，提问作者John Emmanuel Dela Cruz