将 HTML 表格传递给 Google 电子表格。从动态表中获取单元格值

Question

我有一个表格，如下所示：

HTML 和 JavaScript

<form>
<table border="1" id="tblSample">
  <tr>
    <th>Col_one</th>
    <th>Col_two</th>
    <th>Col_three</th>
  </tr>
  <tr>
    <td><input type="text" name="txtRowa1"
     id="txtRowa1" size="5" /></td>
    <td>
    <input type="text" name="txtRowb1"
     id="txtRowb1" size="15" />    </td>
    <td>
    <input type="text" name="txtRowc1"
     id="txtRowc1" size="15" />    </td>
  </tr>
   <tr>
    <td><input type="text" name="txtRowa2"
     id="txtRowa2" size="5" /></td>
    <td>
    <input type="text" name="txtRowb2"
     id="txtRowb2" size="15" />    </td>
    <td>
    <input type="text" name="txtRowc2"
     id="txtRowc2" size="15" />    </td>
  </tr>
    <tr>
    <td><input type="text" name="txtRowa3"
     id="txtRowa3" size="5" /></td>
    <td>
    <input type="text" name="txtRowb3"
     id="txtRowb3" size="15" />    </td>
    <td>
    <input type="text" name="txtRowc3"
     id="txtRowc3" size="15" />    </td>
  </tr>
  
</table>
</form>

<p>
<input onclick="formSubmit()" type="button" value="Send data" />
</p>

<script type="text/javascript">
        function formSubmit() {
            google.script.run.getValuesFromForm(document.forms[0]);
        }
    </script>

这个表需要放到电子表格里，gs文件是：

//getValuesFromForm
function getValuesFromForm(form){
  var tempa1 = form.txtRowa1,
  tempb1 = form.txtRowb1,
  tempc1 = form.txtRowc1,
  tempa2 = form.txtRowa2,
  tempb2 = form.txtRowb2,
  tempc2 = form.txtRowc2,
  tempa3 = form.txtRowa3,
  tempb3 = form.txtRowb3,
  tempc3 = form.txtRowc3,
 sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
 sheet.appendRow([tempa1, tempb1, tempc1]);
 sheet.appendRow([tempb1, tempb2, tempc2]);
 sheet.appendRow([tempc1, tempc2, tempc3]);
 }

但问题是：表格是动态的，我不知道会有多少行（在这种情况下有 3 行）我如何从表格中获取值？

Answer 1

我会使用 DOM 方法和属性从客户端从表中、浏览器中获取数据。此代码在将表发送到服务器端 gs 代码之前对其进行处理。它是动态的，因此表长度或行长度无关紧要。而且您无需使用名称或 ID 来命名您的输入以引用它们。这段代码中有两个循环。一个FOR 循环嵌套在另一个循环中。代码遍历表中的每一行，并为每一行获取该行中的所有输入。然后它创建一个二维数组发送到gs 代码。您可能会问，“为什么不在gs 代码中进行处理？”在客户端处理数据允许您使用方法getElementsByTagName()。你不能用服务器端代码来做到这一点。

您可以在客户端或服务器端 JavaScript 中使用 FORM 对象作为替代方案，但是 Form Object 中有很多数据，很难弄清楚和理解 Form Object 中的数据是如何是结构化的。

这段代码的最终结果是另一个数组中的单元格值数组。

[[[Row1_Cell1，Row1_Cell2]，[Row2_Cell1，Row2_Cell2]等]

您还需要在gs 代码中嵌套一个FOR 循环。 FOR 循环将消除为每行和单元格硬编码大量变量名的需要。

客户端 JavaScript

<script type="text/javascript">
  function formSubmit() {
    console.log('formSubmit ran');

    var allTableRows = document.getElementsByTagName("tr");
    console.log('allTableRows: ' + allTableRows);

    var numbrOfRows = allTableRows.length;
    console.log('numbrOfRows: ' + numbrOfRows);

    var thisCellValue = "";

    var arryMaster = [];
    var arryOfTableRowVals = [];
    var thisRowData = "";

    for (var i = 1; i < numbrOfRows; i++) {// START with i = 1

      console.log('row count: ' + i);

      thisRowData = allTableRows[i].getElementsByTagName('input');
      console.log('thisRowData: ' + thisRowData);
      console.log('thisRowData.length: ' + thisRowData.length);

      arryOfTableRowVals = []; //reset the array

      for (var j = 0; j < thisRowData.length; j++) {
        console.log('---- count j: ' + j);
        thisCellValue = thisRowData[j].value;

        arryOfTableRowVals.push(thisCellValue);

        console.log('---- arryOfTableRowVals: ' + arryOfTableRowVals[j]);
      };
      arryMaster.push(arryOfTableRowVals);
    }

    console.log(arryMaster[2][2]);
    google.script.run.getValuesFromForm(arryMaster);

  }
</script>

我在代码中放置了很多console.log() 语句，以便您可以在浏览器控制台中看到代码的结果。结果将打印到控制台。您可能想将它们注释掉，或删除它们。