Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
154 views
in Technique[技术] by (71.8m points)

Onchange in Google script to change table data

Here's what I'm trying to do I want to get the value of the select to var lob so that if I selected a value it will change the data on the table:

<select id="mySelect" onchange="myFunction()">
<? var list = SpreadsheetApp
.openById('sheetID')
.getSheetByName("VL Slots")
.getDataRange()
.getValues();
var lane = [1];
?>
<? for (var l = 3; l < list.length; l++) { ?>
<option value="<?= list[l][lane] ?>"><?= list[l][lane] ?> </option>
<?}?>
</select>
<script>
function myFunction() {
var lob = document.getElementById("mySelect").value;
}
</script>
<? var lob; ?>
<table>
<? var data = SpreadsheetApp
.openById('sheetID')
.getSheetByName("VL Request")
.getDataRange()
.getValues();
var rid = [0];
var request = [1];
<? for (var i = 1; i < data.length; i++) { ?>
<tr>
<? if (data[i][rid] === lob) { ?>
<td>data[i][request] </td>
<? } ?>
</tr>
<? } ?>
</table>

I hope someone help me on how to do it right.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Because scriptlet code executes before the page is served, it can only run once per page;

This means that if your spreadsheet data changes, your html table will not incorporate the change.

  • The Apps Script onChange trigger can run an Apps Script code, fired by a change in the document. However, I assume that you are deploying a Web App, and the WebApp will not be updated by an onChange trigger, unless you refresh your browser manually.

  • For your situation you best bet would be to use polling for refreshing the data in your website in combination with google.script.run

Sample:

code.gs

function doGet()
{
  var html=HtmlService.createTemplateFromFile('index');
  return html.evaluate();
}

function getSelect() {
  var list = SpreadsheetApp.openById('spreadssheetID').getSheetByName("VL Slots").getDataRange().getValues();
  var lane = 1;
  var select="";
  for (var l = 3; l < list.length; l++) {
    select+='<option value="' + list[l][lane] + '">'+ list[l][lane] + ' </option>';
  }
  return select;
}
function getTable(lob) {
  var data = SpreadsheetApp.openById('spreadssheetID').getSheetByName("VL Request").getDataRange().getValues();
  var rid = 0;
  var request = 1;
  var table="";
  table+='<tr>';
  for (var i = 1; i < data.length; i++) { 
    if (data[i][rid] == lob) {
      table+='<td>' + data[i][request] + '</td>';
    }
  }
  table+='</tr>';
  return  table;
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <script>
  function populateSelect(){
    google.script.run.withSuccessHandler(onSuccess).getSelect();
   }
  function onSuccess(select){
    document.getElementById("mySelect").innerHTML=select;
  }
  function polling(){
    setInterval(myFunction,2000);
   }
  function myFunction(){
    var lob = document.getElementById("mySelect").value;
    google.script.run.withSuccessHandler(onSuccess2).getTable(lob);    

  }
  function onSuccess2(table){
    document.getElementById("myTable").innerHTML=table;
  }
  </script>
  <body onload="populateSelect()">
    <select id="mySelect" onchange="polling()">
    </select>
    <table id="myTable">
    </table>
  </body>
</html>

setInterval(myFunction,2000); will refresh your data in desired intervals (in ms).


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...