如何获取动态HTML表格中的输入值并导出数组到Google Script

问题根源 #

你当前无法获取输入值的核心原因有两个：

1. 直接读取单元格innerHTML只能拿到HTML源码，用户输入的实时值并不存在于HTML字符串里，而是存储在<input>、<select>这类表单元素的value属性中，需要先定位到单元格内的表单元素再读取值。
2. google.script.run无法直接传递客户端DOM对象（你直接传整个table元素是无效的），需要先在前端把所有表单数据整理成可序列化的二维数组，再传递给服务端Google Script。

修正后的代码 #

1. 先修复addRows的小bug #

你原来的addRows函数中循环条件写的是i <= cellCount，会额外多插入一个空白单元格，修改循环条件即可：

function addRows(){ 
    var table = document.getElementById('emptbl');
    var rowCount = table.rows.length;
    var cellCount = table.rows[0].cells.length; 
    var row = table.insertRow(rowCount);
    // 把原来的<=改成<，避免多插单元格
    for(var i =0; i < cellCount; i++){
        var cell = row.insertCell(i);
        var copycel = document.getElementById('col'+i).innerHTML;
        cell.innerHTML=copycel;
    }
}

2. 重写sendIt函数实现数据读取 #

function sendIt(e){
    // 阻止表单默认提交跳转行为
    e && e.preventDefault();
    var oTable = document.getElementById('emptbl');
    var rowLength = oTable.rows.length;
    // 定义存储所有数据的二维数组
    var tableData = [];

    // 从i=1开始循环，跳过第一行表头
    for (let i = 1; i < rowLength; i++){
        var oCells = oTable.rows[i].cells;
        var cellLength = oCells.length;
        // 存储当前行的所有字段值
        var rowData = [];

        for(let j = 0; j < cellLength; j++){
            var cell = oCells[j];
            // 查找单元格内的input或select元素
            var input = cell.querySelector('input, select');
            // 读取元素的value值加入行数组
            rowData.push(input ? input.value.trim() : '');
        }
        // 把行数据加入总数组
        tableData.push(rowData);
    }

    // 打印测试，你可以自己查看数组结构是否符合预期
    console.log(tableData);
    // 把整理好的纯数组传递给服务端Google Script
    google.script.run.appendRowFromTableSubmit(tableData);
    alert("数据提交成功");
}

3. 修正提交按钮的触发逻辑 #

把HTML里的提交按钮代码改成下面这样，避免表单默认跳转：

<input type="submit" value="Submit1" onclick="sendIt(event)" />

后续适配 #

你只需要对应修改服务端的appendRowFromTableSubmit函数，直接接收这个二维数组参数做后续处理即可，数组的每一项对应表格的一行数据，顺序和表头的Tag、Size、Notes、Species、Gender完全对应。

内容的提问来源于stack exchange，提问作者Alex Beavren