App Script+DataTables表格求助：自动加载新数据、标红及报错修复

一、先解决核心错误 #

1. 表格ID不一致问题 #

你的HTML中表格ID是datatable，但JS里用的是#data-table，CSS里也混着两个ID，先统一为data-table：

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

2. DataTables列数不匹配报错 #

你JS里只定义了4列，但谷歌表格取的是A2:N（14列），导致DataTables找不到对应列的数据报错。两种解决方式：

• 方式一（推荐）：修改Code.gs的数据范围，只取前4列：

function getData1(){
  var spreadSheetId = "mySpreadsheetId"; //spreadsheet ID
  var dataRange     = "Data!A2:D"; // 仅取前4列，匹配JS列定义
  var range   = Sheets.Spreadsheets.Values.get(spreadSheetId, dataRange);
  var values  = range.values || []; // 处理空表格情况
  return values;
}

• 方式二：如果需要全部14列，在JS的columns数组里补全14个{"title":"列名"}的定义。

二、实现自动加载新数据+新增行红色背景 #

修改后的JS代码 #

let table; // 保存DataTables实例
let lastRowCount = 0; // 记录上次数据的行数

// 初始化表格
function initTable(dataArray) {
  table = $('#data-table').DataTable({
    data: dataArray,
    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 || ''; // 空值返回空字符串
        }
      }
    ]
  });
  lastRowCount = dataArray.length;
}

// 更新表格并标记新增行
function updateTable(newData) {
  const newRowCount = newData.length;
  const addedRows = newRowCount - lastRowCount;

  // 清空表格并加载新数据
  table.clear().rows.add(newData).draw();

  // 给新增的行添加红色背景
  if (addedRows > 0) {
    for (let i = newRowCount - addedRows; i < newRowCount; i++) {
      table.row(i).nodes().to$().addClass('red-row');
    }
  }

  lastRowCount = newRowCount;
}

// 首次加载数据
google.script.run.withSuccessHandler(initTable).getData1();

// 每5秒刷新一次数据（可调整时间，单位毫秒）
setInterval(() => {
  google.script.run.withSuccessHandler(updateTable).getData1();
}, 5000);

修改后的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.red-row {
  background-color: #ff4444;
  color: white;
}

说明 #

• 定时刷新时间可以调整setInterval的第二个参数，比如改成10000就是10秒刷新一次。
• 新增行的红色背景会在每次刷新后保留，直到下一次有新数据添加（因为每次刷新都会重新标记新增行）。

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