这些脚本在首次加载时起作用。但是,当我在下拉菜单中选择时,页面将根据我选择的内容重新加载表中的新数据,这是当我单击一行时无法收集数据的时间。请参见下面的代码:
代码
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>
<form id="logForm">
<label>Request <span class="required">*</span></label><input type="text" id="request" name="request" class="field-long" placeholder="Request" readonly />
</form>
<script>
var table = document.getElementById('myTable');
for(var i = 1; i < table.rows.length; i++)
{
table.rows[i].onclick = function()
{
//rIndex = this.rowIndex;
document.getElementById("request").value = this.cells[0].innerHTML.trim();
};
}
</script>
</body>
</html>
我想做的是,我可以在下拉列表中进行选择,然后根据所选内容将数据收集到表中,然后单击行以在表格中传递信息。
最佳答案
如果我理解正确,那么您的目标是单击通过轮询从电子表格中检索到的值,并将此值设置为输入字段“ request”的内容。
在这种情况下,您应该将您的请求合并到onSuccess2
函数中,这样在表中填充了电子表格中的内容后就会发生
请记住,由于您仅从工作表中检索一个值,因此无需遍历行
修改代码的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;
var myTable = document.getElementById('myTable');
var row = myTable.getElementsByTagName("tr")[0];
var cell = row.getElementsByTagName("td")[0];
var request= cell.innerHTML;
row.onclick = createClickHandler(request);
}
var createClickHandler = function(request) {
return function(){
document.getElementById("request").value = request;
};
}
</script>
<body onload="populateSelect()">
<select id="mySelect" onchange="polling()">
</select>
<table id="myTable">
</table>
<form id="logForm">
<label>Request <span class="required">*</span></label><input type="text" id="request" name="request" class="field-long" placeholder="Request" readonly />
</form>
</body>
</html>
关于javascript - 脚本冲突,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58521387/