css 自动更新HTML表格

li9yvcax 于 2023-02-26 发布在其他

关注(0)|答案(1)|浏览(101)

我有一个HTML表，其中显示的数据来自我的谷歌电子表格。我想要的是当我更新我的谷歌表的HTML表将自动更新，而不刷新整个页面。有人能帮助我吗？谢谢。此外，当新的数据被添加，它会改变背景色为红色。
下面是我的www.example.com上的代码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;
}

**

x一个一个一个一个x一个一个二个一个x一个一个三个一个

css

来源：https://stackoverflow.com/questions/75562895/auto-update-html-table

1条答案

按热度按时间

tvokkenx1#

如果我很好地理解你想要什么，这里是一个例子：最初，该表为空，将使用fetchData()函数从Google Spreadsheet中提取的数据填充该表。updateTable()函数使用新数据更新HTML表，并将新行的背景颜色更改为红色：

// Define a function to fetch data from Google Spreadsheet
function fetchData() {
  var spreadsheetId = "your-spreadsheet-id"; // Change to your spreadsheet ID
  var range = "Data!A2:N"; // Change to the range of your data
  var url = "https://sheets.googleapis.com/v4/spreadsheets/" + spreadsheetId + "/values/" + range + "?key=YOUR_API_KEY";
  // Change YOUR_API_KEY to your API key

  fetch(url)
    .then(response => response.json())
    .then(data => updateTable(data.values))
    .catch(error => console.error(error));
}

// Define a function to update the HTML table
function updateTable(dataArray) {
  var table = $('#datatable').DataTable();
  table.clear();
  table.rows.add(dataArray);
  table.draw();

  // Change the background color of new rows to red
  var rows = table.rows({order:'index'}).nodes();
  for (var i = 0; i < rows.length; i++) {
    var row = rows[i];
    if (!$(row).hasClass('new-row')) {
      $(row).addClass('new-row');
      $(row).css('background-color', 'red');
    }
  }
}

// Call fetchData() initially and every 5 seconds
fetchData();
setInterval(fetchData, 5000);

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

#datatable td,
#datatable 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;
}

#datatable tr.new-row {
  background-color: red;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Table Example</title>
  <!-- Include jQuery library -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- Include DataTables library -->
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.css">
  <script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.js"></script>
</head>
<body>
  <table id="datatable" class="table table-striped table-sm table-hover table-bordered">
    <thead>
      <tr>
        <th>Task</th>
        <th>Pending</th>
        <th>Completed</th>
        <th>Link</th>
      </tr>
    </thead>
    <tbody>
      <!-- Table rows will be added dynamically -->
    </tbody>
  </table>
</body>
</html>

赞(0）回复(0）举报 2023-02-26

我来回答

css 自动更新HTML表格

1条答案

相关问题

热门标签

最新问答