Автоматическое обновление тела таблицы каждые 3 секунды

#javascript #google-apps-script

Вопрос:

Я создал веб-сайт с помощью скрипта приложения.

Мне нужно, чтобы таблица автоматически обновлялась каждые 3 секунды. (Только таблица, а не вся страница)

Как я могу это сделать?

Вот мой код:

 <script>

document.addEventListener("DOMContentLoaded",function(){

  google.script.run.withSuccessHandler(generateTable).getOnline();
  google.script.run.withSuccessHandler(getOnline).generateTable();

});

function generateTable(dataArray){

  var tbody = document.getElementById("tablebody");
  
  dataArray.forEach(function(r){
  
  var row = document.createElement("tr");
  var col1 = document.createElement("td");
  col1.textContent = r[0];
  var col2 = document.createElement("td");
  col2.textContent = r[1];
  var col3 = document.createElement("td");
  col3.textContent = r[2];
  row.appendChild(col1);
  row.appendChild(col2);
  row.appendChild(col3);
  tbody.appendChild(row);
  
  
  });
}

</script>

 table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

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

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

tr:hover {background-color: #f5f5f5;}

 <h1>🟢 Current Users</h1>
    <table>
      <tr>
        <th>Name</th>
        <th>Last Name</th>
        <th>EID</th>
      </tr>
     <tbody id="tablebody">
    </table>

Развернуть фрагмент

Значения в теле таблицы взяты из моей электронной таблицы. Но, по-видимому, каждый раз, когда я ввожу некоторые значения в свою электронную таблицу, мне все равно нужно обновлять всю страницу, чтобы я мог видеть значение в таблице. Как я могу это сделать? Большое вам спасибо! С новым годом.

Ответ №1:

 document.addEventListener("DOMContentLoaded",function(){
  setInterval(() => {
    google.script.run.withSuccessHandler(generateTable).getOnline();
    google.script.run.withSuccessHandler(getOnline).generateTable();
  }, 3000); // run the function every 3 seconds
  
});

Развернуть фрагмент

Вы можете рассмотреть возможность использования setInterval метода для обновления источника данных вашей таблицы каждые 3 секунды. Документы: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval

1. спасибо, это помогло мне, я попробовал ваше предложение и получил то значение, которое я хочу. но новая проблема заключается в том, что новая таблица и старая таблица останутся на моей странице. я хочу, чтобы старая таблица заменялась новой таблицей и так далее.

2. Во время запуска этого скрипта вы можете очистить элемент. Это должно сработать

Ответ №2:

Я копирую один и тот же скрипт с одним изменением.

 document.addEventListener("DOMContentLoaded",function(){
  setInterval(() => {
document.getElementById("tablebody").innerHTML = "";
    google.script.run.withSuccessHandler(generateTable).getOnline();
    google.script.run.withSuccessHandler(getOnline).generateTable();
  }, 3000); // run the function every 3 seconds
  
});

Вы можете сделать что-то вроде этого.