自动更新 HTML 表格

Question

我有一个 html 表格，其中显示的数据来自我的谷歌电子表格。我想要的是当我更新我的 google 工作表时，html 上的表格将自动更新而不刷新整个页面。谁能帮我？谢谢。此外，当添加新数据时，它会将背景颜色更改为红色。

这是我的 Code.gs 上的代码：

**

function getData1(){
  var spreadSheetId = ""; //spreadsheet ID
  var dataRange     = "Data!A2:N"; //CHANGE
 
  var range   = Sheets.Spreadsheets.Values.get(spreadSheetId,dataRange);
  var values  = range.values;
  Logger.log(values);
  return values;
}

**

  google.script.run.withSuccessHandler(showData).getData1();
  setInterval(function showData(dataArray){
    $(document).ready(function(){
      $('#data-table').DataTable({
        data: dataArray,
        columns: [
          {"title":"Task"},
          {"title":"Pending"},
          {"title":"Completed"},
          {"title":"Link",
          "render": function(data, type, row, meta){
            if(type === 'display'){
              data = '<a href="' + data + '" target="_blank">' + data + '</a>';
            }
            return data;
          }
        }
        ]
      }, 1000 );
    });
  })

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

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

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

#datatable tr:hover {
  background-color: #ddd;
}

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

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