使用 Apps 脚本将过滤后的 HTML web 应用表数据发送回 Google 表格

Question

目前，我正在尝试从我的表格中提取过滤后的地区数据并将其提交到我的谷歌表格中的一列。 我可以手动将数据直接输入到我的谷歌表格中，但我不知道如何提取我在数据中过滤的数据并将其输入到表格中。

function onSuccess() {
  alert('Your request has ben submitted');
}

function buttonFunction() {
  var table = document.getElementById("myTable");
  var rows = table.getElementsByTagName("tr");
  var cells = rows.getElementsByTagName("td");
  var cellvalue = (cells[0].innerText);

  google.script.run.withSuccessHandler(onSuccess).setValue(cellvalue);
}

function generateTable(dataArray) {
      var tbody = document.getElementById("table-body");
      var counter = 0;
      for (var row in dataArray)  {
        var row = document.createElement("tr");
        var col1 = document.createElement("td");
        var col2 = document.createElement("td");
        var col3 = document.createElement("td");
        var col4 = document.createElement("td");
        var col5 = document.createElement("td");
        var col6 = document.createElement("td");

        col1.textContent = dataArray[counter][0];
        col2.textContent = dataArray[counter][1];
        col3.textContent = dataArray[counter][2];
        col4.textContent = dataArray[counter][3];
        col5.textContent = dataArray[counter][4];
        col6.textContent = dataArray[counter][5];

        row.appendChild(col1);
        row.appendChild(col2);
        row.appendChild(col3);
        row.appendChild(col4);
        row.appendChild(col5);
        row.appendChild(col6);

        tbody.appendChild(row);
        counter +=1; 
      }
}

function filterFunction() {
  // Declare variables
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[3]
    
    if (td ) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

设置值 function

function setValue(value) {
  var ss = SpreadsheetApp.openByUrl(url);
  var targetSheet = ss.getSheetByName('Target Lists');
  targetSheet.getRange(1,ws.getLastColumn()+1,1,2).setValue(value);
}

表 html

<table class="table table-hover" id="myTable" 
     data-custom-sort="customSort"
  data-pagination="true"
  data-ajax-options="ajaxOptions"
  data-url="json/data1.json">
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        District
                    </button>
                    <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <a class="dropdown-item" href="#">Emery Unified</a>
                        <a class="dropdown-item" href="#">Mountain House Elementary</a>
                    </div>
                </div>
                <thead>
                    <tr>
                        <th scope="col">County</th>
                        <th scope="col">District</th>
                        <th scope="col">Position</th>
                        <th scope="col">Full Name</th>
                        <th scope="col">Date</th>
                        <th scope="col">Note</th>
                    </tr>
                </thead>
                <tbody id="table-body">

                </tbody>
            </table>
            <input type="text" class="form-control" id="listName" placeholder="Type Name Here" aria-label="Username" aria-describedby="basic-addon1">
            <button class="btn btn-dark" type="save" id="saveButton">Save</button>
        </div> <!-- CLOSE AUTOFLOW -->
        <button onclick='buttonFunction()'>Submit</button>

你可以忽略我额外的提交功能——我正在测试一些其他选项。

Answer 1

我相信你的目标如下。

• 您想从 HTML 的过滤表中检索显示值并将它们放入 Google 电子表格。

首先，请确认以下修改点。

修改点：

• 在 HTML&Javascript

  • 在这种情况下，需要从tr中的td检索style.display不是none的值。

• 在 Google Apps 脚本中，

  • 似乎没有声明url和ws 。
  • 我无法理解您对targetSheet.getRange(1,ws.getLastColumn()+1,1,2).setValue(value)的期望。
    • 因此，从您的回复中，我想您想将 append value转换为targetSheet电子表格中的url 。

当以上几点反映到您的脚本时，它变成如下。

修改后的脚本：

HTML&Javascript:

请修改buttonFunction()如下。

function buttonFunction() {
  var table = document.getElementById("myTable");
  var values = [...table.querySelectorAll("tr")].reduce((ar, tr) => {
    if (tr.style.display != "none") {
      var temp = [...tr.querySelectorAll("td")].map((td) => td.innerHTML);
      if (temp.some((e) => e.toString() != "")) ar.push(temp);
    }
    return ar;
  }, []);

  console.log(values); // Here, you can see the retrieved values at the console.

  google.script.run.withSuccessHandler(onSuccess).setValue(values);
}

谷歌应用脚本：

请按如下方式修改setValue(value) 。

function setValue(value) {
  var url = "###"; // Please set this.
  var ss = SpreadsheetApp.openByUrl(url);
  var targetSheet = ss.getSheetByName('Target Lists');
  targetSheet.getRange(targetSheet.getLastRow() + 1, 1, value.length, value[0].length).setValues(value);
}

笔记：

• 根据您的回复，我想您想将 append value转换为targetSheet电子表格中的url 。 如果我的猜测不正确，我可以问你目标的细节吗？
• 如果您使用的是 Web 应用程序，修改上述脚本后，请将 Web 应用程序重新部署为新版本。 这样，最新的脚本就会反映到 Web 应用程序中。 请注意这一点。

参考：

• 设置值（值）
• 减少（）
• 地图（）