通过Google Sheets Script / API在Web应用程序中使用CRUD功能显示表格(查询,过滤器,自定义)

时间:2019-06-27 20:40:58

标签: html google-apps-script google-sheets

以下是此项目的html代码,还有一个单独的google脚本js,可将数据从google表格显示到网站(html)页面。

下面的html是读取功能和表格显示。尽管希望将空文本框连接到这些行(例如ROW4或Val4),这将起作用,这将允许用户在文本框中输入值,而应用程序会将数据输入到电子表格中的相应行。 / p>

此外,我只想按照查询逻辑显示行。例如,如果第1列= PERSON_BOB,则显示单元格0、1、4、6等,并带有一个空文本框,允许用户将输入内容写入单元格5、7、8。

我有一个html表,可为电子表格提供CRUD功能,现在想对其进行优化以供我使用。

function read_value() {
$("#re").css("visibility","hidden");
   document.getElementById("loader").style.visibility = "visible";
 var url = script_url+"?action=read";
$.getJSON(url, function (json) {
    // Set the variables from the results array
        // CREATE DYNAMIC TABLE.
        var table = document.createElement("table");
        var header = table.createTHead();
        var row = header.insertRow(0);     
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);

        cell1.innerHTML = "<b>Val1</b>";
        cell2.innerHTML = "<b>Val2</b>";
        cell3.innerHTML = "<b>Val3</b>";
        // ADD JSON DATA TO THE TABLE AS ROWS.
        // ADD ELEMENT NAME FOR EACH ROW NEEDED
        for (var i = 0; i < json.records.length; i++) {
            tr = table.insertRow(-1);
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = json.records[i].Val1;
                tabCell = tr.insertCell(-1);
                tabCell.innerHTML = json.records[i].Val2;
                tabCell = tr.insertCell(-1);
                tabCell.innerHTML = json.records[i].Val3;
            }

        // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
        var divContainer = document.getElementById("showData");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
        document.getElementById("loader").style.visibility = "hidden";
        $("#re").css("visibility","visible");
    });
    }

见上文

0 个答案:

没有答案