javascript - 将 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 对象中有很多数据，并且很难弄清楚和理解该 Form 对象中的数据是如何工作的结构化。

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

[[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() 语句，以便您可以在浏览器控制台中看到代码的结果。结果将打印到控制台。您可能想要将它们注释掉或删除。