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

Question

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

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>

这个table需要放在电子表格中，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]);
 }

但问题是：table 是动态的，我不知道会有多少行（在本例中有 3 行）如何从 [=35 中获取值=]?

Answer 1

我会在浏览器中使用 DOM 方法和属性从客户端从 table 中获取数据。此代码在发送到服务器端 gs 代码之前处理您的 table。它是动态的，因此 table 长度或行长度是多少并不重要。而且您不需要使用名称或 ID 来命名您的输入以引用它们。这段代码中有两个循环。一个 FOR 循环嵌套在另一个循环中。代码遍历 table 中的每一行，并针对每一行获取该行中的所有输入。然后它创建一个二维数组发送到 gs 代码。你可能会问，"why not do the processing in the gs code?" 在客户端处理数据可以使用getElementsByTagName() 方法。你不能用服务器端代码来做到这一点。

您可以在客户端或服务器端使用 FORM 对象作为替代方案 JavaScript，但是 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() 语句，以便您可以在浏览器控制台中看到代码的结果。结果将打印到控制台。您可能想将它们注释掉或删除。

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

Pass HTML Table to Google Spreadsheet. Get Cell Values out of a Dynamic Table

html

javascript

web-applications

google-sheets

google-apps-script

HTML和JavaScript

客户端JavaScript