Question

到目前为止，我有一个功能，我可以随时打电话给我，现在我在＆＃39; onLoad＆＃39;这是代码。

HTML文件

<table  id = "TableContainer" cellspacing="2" cellpadding="3" width ="100%" align = "center" class="hoverTable">
   <tr>
   <th  bgcolor = "darkgreen"><font color="white">#</font></th>
   <th  bgcolor = "darkgreen"><font color="white">Area</font></th>
   <th  bgcolor = "darkgreen" width = "200px"><font color="white">Customer Name</font></th>
   <th  bgcolor = "darkgreen"><font color="white">Person In Charge</font></th>
   <th  bgcolor = "darkgreen" width = "250px"><font color="white">Remarks</font></th>
   <th  bgcolor = "darkgreen"><font color="white">Status</font></th>
   <th  bgcolor = "darkgreen"><font color="white">Doc. Date</font></th>
   <th  bgcolor = "darkgreen"></th>
   </tr>
   <tr>
   </tr>
</table>

这是javascript。

<script>
function GenerateTable() {
   <? var data = getData(); ?>  
   var table = document.getElementById("TableContainer");

   <? for (var i = 12; i < data.length; i++) { ?>


      var row = table.insertRow(-1);
      var row_did = row.insertCell(0);
      var row_area = row.insertCell(1);
      var row_cusname = row.insertCell(2);
      var row_pic = row.insertCell(3);
      var row_remarks = row.insertCell(4);
      var row_status = row.insertCell(5);
      var row_docudate = row.insertCell(6);
      var row_button = row.insertCell(7);

      row_did.innerHTML =      '<td  id="dataid" class="dataid">'+ <?= data[i][0] ?> + '</td>';
      row_area.innerHTML =     '<td  id="area" class="area">'+ <?= data[i][1] ?> +'<td>';
      row_cusname.innerHTML =  '<td  id ="cusname" class="cusname">' + <?= data[i][2] ?>  +'<td>';
      row_pic.innerHTML =      '<td  id ="cic" class="cic">' + <?= data[i][3] ?>  +'<td>';
      row_remarks.innerHTML =  '<td  id ="remarks" class="remarks">' + <?= data[i][4] ?>  +'<td>';
      row_status.innerHTML =   '<td  id ="status" class="status">' +<?= data[i][5] ?>  +'<td>';
      row_docudate.innerHTML = '<td  id ="docdate" class="docdate">'+ <?= data[i][6] ?>  +'<td>';
      row_button.innerHTML =   '<td><img id = "selectdata" class = "click-to-select" src= "https://docs.google.com/uc?id=0By6kUPbaVMWCbUI0LTJTR2g2N3M" alt="Submit" width="13px" height="13px" title = "Edit Selected Data" data-toggle="modal" data-target="#myModal"/></td>';
  <? } ?>

  $('.click-to-select').click(function() {

    var dataid = $(this).closest('tr').find('td:nth-of-type(1)').text()
    var area = $(this).closest('tr').find('td:nth-of-type(2)').text();
    var cusname = $(this).closest('tr').find('td:nth-of-type(3)').text();
    var cicoption = $(this).closest('tr').find('td:nth-of-type(4)').text();
    var remarks = $(this).closest('tr').find('td:nth-of-type(5)').text();
    var statoption = $(this).closest('tr').find('td:nth-of-type(6)').text();
    var documentdate = $(this).closest('tr').find('td:nth-of-type(7)').text();
        console.log('The dataid is:' + dataid)
    $('#dataid').val(dataid)
    $('#areaoption').val(area)
    $('#cusname').val(cusname)
    $('#cicoption').val(cicoption)
    $('#remarks').val(remarks)
    $('#statoption').val(statoption)
    $('#documentdate').val(documentdate)

});
}
</script>

这是google脚本。

function getData() {
  return SpreadsheetApp
   .getActiveSpreadsheet().getSheetByName("Customer Logs Information Database")
   .getDataRange()
   .getValues();
   return htmlTemplate;
}

这是我的问题。我想在我的for loop

中添加此代码

if (data[][]== "My Criteria")所以我会根据我的情况循环数据现在我的目标是如何使用文本框值呢？

<input id="input_cusname" style="width: 200px;" name="input_cusname" type="text" />

请注意我使用JavaScript，尤其是带有标签的Google脚本＆lt; ?? ＆GT;

Answer 1

你可以在javascript中使用scriplet来完成它。使用google.script.run可以实现同样的目的。在App script best practice documentation中也提到了异步加载数据而不是通过scriplet加载数据。

如果您使用以下代码，请从body标签中删除onload事件。

<script>

google.script.run.withSuccessHandler(GenerateTable).getData();

function GenerateTable(data) {
   console.log(data)
   var table = document.getElementById("TableContainer");

  for (var i = 12; i < data.length; i++) {
      if (data[][]== "My Criteria"){ //add your condition

      var row = table.insertRow(-1);
      var row_did = row.insertCell(0);
      var row_area = row.insertCell(1);
      var row_cusname = row.insertCell(2);
      var row_pic = row.insertCell(3);
      var row_remarks = row.insertCell(4);
      var row_status = row.insertCell(5);
      var row_docudate = row.insertCell(6);
      var row_button = row.insertCell(7);

      row_did.innerHTML =      '<td  id="dataid" class="dataid">'+ data[i][0]  + '</td>';
      row_area.innerHTML =     '<td  id="area" class="area">'+ data[i][1]  +'<td>';
      row_cusname.innerHTML =  '<td  id ="cusname" class="cusname">' + data[i][2]   +'<td>';
      row_pic.innerHTML =      '<td  id ="cic" class="cic">' + data[i][3]   +'<td>';
      row_remarks.innerHTML =  '<td  id ="remarks" class="remarks">' + data[i][4]   +'<td>';
      row_status.innerHTML =   '<td  id ="status" class="status">' +data[i][5]   +'<td>';
      row_docudate.innerHTML = '<td  id ="docdate" class="docdate">'+ data[i][6]   +'<td>';
      row_button.innerHTML =   '<td><img id = "selectdata" class = "click-to-select" src= "https://docs.google.com/uc?id=0By6kUPbaVMWCbUI0LTJTR2g2N3M" alt="Submit" width="13px" height="13px" title = "Edit Selected Data" data-toggle="modal" data-target="#myModal"/></td>';
   }
}
  $('.click-to-select').click(function() {

    var dataid = $(this).closest('tr').find('td:nth-of-type(1)').text()
    var area = $(this).closest('tr').find('td:nth-of-type(2)').text();
    var cusname = $(this).closest('tr').find('td:nth-of-type(3)').text();
    var cicoption = $(this).closest('tr').find('td:nth-of-type(4)').text();
    var remarks = $(this).closest('tr').find('td:nth-of-type(5)').text();
    var statoption = $(this).closest('tr').find('td:nth-of-type(6)').text();
    var documentdate = $(this).closest('tr').find('td:nth-of-type(7)').text();
        console.log('The dataid is:' + dataid)
    $('#dataid').val(dataid)
    $('#areaoption').val(area)
    $('#cusname').val(cusname)
    $('#cicoption').val(cicoption)
    $('#remarks').val(remarks)
    $('#statoption').val(statoption)
    $('#documentdate').val(documentdate)

});
}
</script>

使用Google表格和Google脚本中的搜索循环

1 个答案: