HTML和JavaScript

＆＃13;

<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>

＆＃13;

此表需要放在电子表格中，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代码。您可能会问，＆＃34;为什么不在gs代码中进行处理？＆＃34;在客户端处理数据允许您使用方法getElementsByTagName()。您无法使用服务器端代码执行此操作。

您可以在客户端或服务器端JavaScript中使用FORM对象作为替代，但是在表单对象中有很多数据，并且很难弄清楚并理解数据的方式在该表单对象是结构化的。

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

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

您还需要FOR代码中的嵌套gs循环。 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表格传递给Google电子表格。从动态表中获取单元格值

HTML和JavaScript

1 个答案:

客户端JavaScript