以下是此项目的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");
});
}
见上文