Google 試算表 / 表格 建立免費雲端資料庫

Google 試算表 / 表格 建立免費雲端資料庫
第一步 建立 你的 表格

1)

前往 https://drive.google.com/drive/my-drive ，     按[新增] 建立 表格，當然你有 Google 戶口, 如無 建立 Google 帳戶。
我準備示範的 輸入資料表格 : https://docs.google.com/forms/d/e/1FAIpQLScU5fih1n_-3CD0ITEYMrRLUw8LOkxkr97JIDzH2e0EwBQNlA/viewform。

2)

觀看資料內容 : https://docs.google.com/spreadsheets/d/e/2PACX-1vQkmz3TnlsqFYZeyd2JXPLE85CKfRKLm09OCkbjTAqc2FQVWOrJfhiSYwn2nLNNmyUrvQaInYuIwGsG/pubhtml

3)

資料內容實際存放在 Google 雲端硬碟 試算表 內 ⇩
https://docs.google.com/spreadsheets/d/1PRmmN4YIBeWxnZOfYBslyCMryBmg_joWGGJAlAs4-hM/edit#gid=406372224
紅字為 試算表 KEY : 1PRmmN4YIBeWxnZOfYBslyCMryBmg_joWGGJAlAs4-hM。

Google 試算表 / 表格 建立免費雲端資料庫 第 3 步 表格回應 試算表 換 JSON格式

Google 試算表 / 表格 建立免費雲端資料庫
第 2 步 表格回應 試算表 換 JSON格式

1)

Google 提供 把 試算表 換 JSON格式，
https://spreadsheets.google.com/feeds/list/1PRmmN4YIBeWxnZOfYBslyCMryBmg_joWGGJAlAs4-hM/1/public/values?alt=json-in-script，
?alt=json-in-script ：傳回 JavaScript 可用的 JSON 格式，
紅字為 試算表 KEY : 1PRmmN4YIBeWxnZOfYBslyCMryBmg_joWGGJAlAs4-hM，
JSON格式 內容。⇩

<div id="DP"></div> <script type="text/javascript" > var xhr = new XMLHttpRequest(); xhr.open("GET", "https://spreadsheets.google.com/feeds/list/1PRmmN4YIBeWxnZOfYBslyCMryBmg_joWGGJAlAs4-hM/1/public/values?alt=json-in-script", false); xhr.send(); var json = xhr.responseText; DP.innerHTML =json ; </script>

00

2)

上面 Json 格式的內容 大部分內容看不懂無所謂，但留意有:
gsx$姓名 , gsx$姓別 , gsx$中文成績 , gsx$英文成績 , 分別是 試算表 4個 欄位。
json.feed.entry[0].gsx$姓名.$t
json.feed.entry[0].gsx$姓別.$t
json.feed.entry[0].gsx$中文成績.$t
json.feed.entry[0].gsx$英文成績.$t
第1筆 資料就有幾筆資料 entry[0], 第2筆 資料就有幾筆資料 entry[1], 第3筆 資料就有幾筆資料 entry[2].......

3)

HTNL 讀取 JSON 內容資料 :
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://spreadsheets.google.com/feeds/list/1PRmmN4YIBeWxnZOfYBslyCMryBmg_joWGGJAlAs4-hM/1/public/values?alt=json-in-script", false);
xhr.send();

  var json = xhr.responseText;
  var obj = JSON.parse(json.slice(28,json.length-2));
  var spData=obj.feed.entry;

<div id="DP" style="font-size: 20px ;"></div> <script type="text/javascript" > var xhr = new XMLHttpRequest(); xhr.open("GET", "https://spreadsheets.google.com/feeds/list/1PRmmN4YIBeWxnZOfYBslyCMryBmg_joWGGJAlAs4-hM/1/public/values?alt=json-in-script", false); xhr.send(); var json = xhr.responseText; var obj = JSON.parse(json.slice(28,json.length-2)); var spData=obj.feed.entry; var OUTDP = ""; OUTDP += "spData.length = " + spData.length + " (合共有" + spData.length + "筆資料)<br><br>"; OUTDP += "<table border='1' width='80%'><tbody>"; OUTDP += "</tr><td>姓名 " ; OUTDP += "</td><td>姓別 " ; OUTDP += "</td><td>中文成績" ; OUTDP += "</td><td>英文成績" ; for(var i=0 ; i<spData.length ;i++){ OUTDP += "</tr><td>" + spData[i].gsx$姓名.$t ; OUTDP += "</td><td>" + spData[i].gsx$姓別.$t ; OUTDP += "</td><td>" + spData[i].gsx$中文成績.$t ; OUTDP += "</td><td>" + spData[i].gsx$英文成績.$t ; } OUTDP += "</tbody></table>" ; DP.innerHTML = OUTDP ; </script>

00

Google 試算表 － 建立免費雲端資料庫

Google 試算表 / 表格 建立免費雲端資料庫
第 3 步 表格回應試算表 篩選/排序

1)

得出所有記錄 :
https://spreadsheets.google.com/feeds/list/1PRmmN4YIBeWxnZOfYBslyCMryBmg_joWGGJAlAs4-hM/1/public/values?alt=json-in-script

2)

篩選內容 包含有(吳) : 在連姑最後加入 &q=吳
href="https://spreadsheets.google.com/feeds/list/1PRmmN4YIBeWxnZOfYBslyCMryBmg_joWGGJAlAs4-hM/1/public/values?alt=json-in-script&q=吳

<div id="DP" style="font-size: 20px ;"></div> <script type="text/javascript" > var xhr = new XMLHttpRequest(); xhr.open("GET", "https://spreadsheets.google.com/feeds/list/1PRmmN4YIBeWxnZOfYBslyCMryBmg_joWGGJAlAs4-hM/1/public/values?alt=json-in-script&q=吳", false); xhr.send(); var json = xhr.responseText; var obj = JSON.parse(json.slice(28,json.length-2)); var spData=obj.feed.entry; var OUTDP = ""; OUTDP += "spData.length = " + spData.length + " (合共有" + spData.length + "筆資料)<br><br>"; OUTDP += "<table border='1' width='80%'><tbody>"; OUTDP += "</tr><td>姓名 " ; OUTDP += "</td><td>姓別 " ; OUTDP += "</td><td>中文成績" ; OUTDP += "</td><td>英文成績" ; for(var i=0 ; i<spData.length ;i++){ OUTDP += "</tr><td>" + spData[i].gsx$姓名.$t ; OUTDP += "</td><td>" + spData[i].gsx$姓別.$t ; OUTDP += "</td><td>" + spData[i].gsx$中文成績.$t ; OUTDP += "</td><td>" + spData[i].gsx$英文成績.$t ; } OUTDP += "</tbody></table>" ; DP.innerHTML = OUTDP ; </script>

00

3)

篩選內容 (女) 資料庫 試算表網址 後面加入 &q=女
https://spreadsheets.google.com/feeds/list/1PRmmN4YIBeWxnZOfYBslyCMryBmg_joWGGJAlAs4-hM/1/public/values?alt=json-in-script&q=女

<div id="DP" style="font-size: 20px ;"></div> <script type="text/javascript" > var xhr = new XMLHttpRequest(); xhr.open("GET", "https://spreadsheets.google.com/feeds/list/1PRmmN4YIBeWxnZOfYBslyCMryBmg_joWGGJAlAs4-hM/1/public/values?alt=json-in-script&q=女", false); xhr.send(); var json = xhr.responseText; var obj = JSON.parse(json.slice(28,json.length-2)); var spData=obj.feed.entry; var OUTDP = ""; OUTDP += "spData.length = " + spData.length + " (合共有" + spData.length + "筆資料)<br><br>"; OUTDP += "<table border='1' width='80%'><tbody>"; OUTDP += "</tr><td>姓名 " ; OUTDP += "</td><td>姓別 " ; OUTDP += "</td><td>中文成績" ; OUTDP += "</td><td>英文成績" ; for(var i=0 ; i<spData.length ;i++){ OUTDP += "</tr><td>" + spData[i].gsx$姓名.$t ; OUTDP += "</td><td>" + spData[i].gsx$姓別.$t ; OUTDP += "</td><td>" + spData[i].gsx$中文成績.$t ; OUTDP += "</td><td>" + spData[i].gsx$英文成績.$t ; } OUTDP += "</tbody></table>" ; DP.innerHTML = OUTDP ; </script>

00

4)

篩選內容 (男) 資料庫 試算表網址 後面加入 &q=男
https://spreadsheets.google.com/feeds/list/1PRmmN4YIBeWxnZOfYBslyCMryBmg_joWGGJAlAs4-hM/1/public/values?alt=json-in-scrip&q=男

<div id="DP" style="font-size: 20px ;"></div> <script type="text/javascript" > var xhr = new XMLHttpRequest(); xhr.open("GET", "https://spreadsheets.google.com/feeds/list/1PRmmN4YIBeWxnZOfYBslyCMryBmg_joWGGJAlAs4-hM/1/public/values?alt=json-in-script&q=男", false); xhr.send(); var json = xhr.responseText; var obj = JSON.parse(json.slice(28,json.length-2)); var spData=obj.feed.entry; var OUTDP = ""; OUTDP += "spData.length = " + spData.length + " (合共有" + spData.length + "筆資料)<br><br>"; OUTDP += "<table border='1' width='80%'><tbody>"; OUTDP += "</tr><td>姓名 " ; OUTDP += "</td><td>姓別 " ; OUTDP += "</td><td>中文成績" ; OUTDP += "</td><td>英文成績" ; for(var i=0 ; i<spData.length ;i++){ OUTDP += "</tr><td>" + spData[i].gsx$姓名.$t ; OUTDP += "</td><td>" + spData[i].gsx$姓別.$t ; OUTDP += "</td><td>" + spData[i].gsx$中文成績.$t ; OUTDP += "</td><td>" + spData[i].gsx$英文成績.$t ; } OUTDP += "</tbody></table>" ; DP.innerHTML = OUTDP ; </script>

00

5)

篩選內容 中文成績 20 至 85之間
資料庫 試算表網址 後面加入 &sq=中文分數>50 and 中文分數<85
https://spreadsheets.google.com/feeds/list/1PRmmN4YIBeWxnZOfYBslyCMryBmg_joWGGJAlAs4-hM/1/public/values?alt=json-in-script&sq=中文成績>20 and 中文成績<85

<div id="DP" style="font-size: 20px ;"></div> <script type="text/javascript" > var xhr = new XMLHttpRequest(); xhr.open("GET", "https://spreadsheets.google.com/feeds/list/1PRmmN4YIBeWxnZOfYBslyCMryBmg_joWGGJAlAs4-hM/1/public/values?alt=json-in-script&sq=中文成績>20 and 中文成績<85", false); xhr.send(); var json = xhr.responseText; var obj = JSON.parse(json.slice(28,json.length-2)); var spData=obj.feed.entry; var OUTDP = ""; OUTDP += "spData.length = " + spData.length + " (合共有" + spData.length + "筆資料)<br><br>"; OUTDP += "<table border='1' width='80%'><tbody>"; OUTDP += "</tr><td>姓名 " ; OUTDP += "</td><td>姓別 " ; OUTDP += "</td><td>中文成績" ; OUTDP += "</td><td>英文成績" ; for(var i=0 ; i<spData.length ;i++){ OUTDP += "</tr><td>" + spData[i].gsx$姓名.$t ; OUTDP += "</td><td>" + spData[i].gsx$姓別.$t ; OUTDP += "</td><td>" + spData[i].gsx$中文成績.$t ; OUTDP += "</td><td>" + spData[i].gsx$英文成績.$t ; } OUTDP += "</tbody></table>" ; DP.innerHTML = OUTDP ; </script>

00

6)

內容 中文成績 排序
資料庫 試算表網址 後面加入 &orderby=column:中文分數，從小至大 排序，
https://spreadsheets.google.com/feeds/list/1PRmmN4YIBeWxnZOfYBslyCMryBmg_joWGGJAlAs4-hM/1/public/values?alt=json-in-script&orderby=column:中文成績

<div id="DP" style="font-size: 20px ;"></div> <script type="text/javascript" > var xhr = new XMLHttpRequest(); xhr.open("GET", "https://spreadsheets.google.com/feeds/list/1PRmmN4YIBeWxnZOfYBslyCMryBmg_joWGGJAlAs4-hM/1/public/values?alt=json-in-script&orderby=column:中文成績", false); xhr.send(); var json = xhr.responseText; var obj = JSON.parse(json.slice(28,json.length-2)); var spData=obj.feed.entry; var OUTDP = ""; OUTDP += "spData.length = " + spData.length + " (合共有" + spData.length + "筆資料)<br><br>"; OUTDP += "<table border='1' width='80%'><tbody>"; OUTDP += "</tr><td>姓名 " ; OUTDP += "</td><td>姓別 " ; OUTDP += "</td><td>中文成績" ; OUTDP += "</td><td>英文成績" ; for(var i=0 ; i<spData.length ;i++){ OUTDP += "</tr><td>" + spData[i].gsx$姓名.$t ; OUTDP += "</td><td>" + spData[i].gsx$姓別.$t ; OUTDP += "</td><td>" + spData[i].gsx$中文成績.$t ; OUTDP += "</td><td>" + spData[i].gsx$英文成績.$t ; } OUTDP += "</tbody></table>" ; DP.innerHTML = OUTDP ; </script>

00

7)

內容 中文成績 排序 從大至小
資料庫 試算表網址 後面加入 &orderby=column:中文成績&reverse=true，從大至小 排序， https://spreadsheets.google.com/feeds/list/1PRmmN4YIBeWxnZOfYBslyCMryBmg_joWGGJAlAs4-hM/1/public/values?alt=json-in-script&orderby=column:中文成績&reverse=true

<div id="DP" style="font-size: 20px ;"></div> <script type="text/javascript" > var xhr = new XMLHttpRequest(); xhr.open("GET", "https://spreadsheets.google.com/feeds/list/1PRmmN4YIBeWxnZOfYBslyCMryBmg_joWGGJAlAs4-hM/1/public/values?alt=json-in-script&orderby=column:中文成績&reverse=true", false); xhr.send(); var json = xhr.responseText; var obj = JSON.parse(json.slice(28,json.length-2)); var spData=obj.feed.entry; var OUTDP = ""; OUTDP += "spData.length = " + spData.length + " (合共有" + spData.length + "筆資料)<br><br>"; OUTDP += "<table border='1' width='80%'><tbody>"; OUTDP += "</tr><td>姓名 " ; OUTDP += "</td><td>姓別 " ; OUTDP += "</td><td>中文成績" ; OUTDP += "</td><td>英文成績" ; for(var i=0 ; i<spData.length ;i++){ OUTDP += "</tr><td>" + spData[i].gsx$姓名.$t ; OUTDP += "</td><td>" + spData[i].gsx$姓別.$t ; OUTDP += "</td><td>" + spData[i].gsx$中文成績.$t ; OUTDP += "</td><td>" + spData[i].gsx$英文成績.$t ; } OUTDP += "</tbody></table>" ; DP.innerHTML = OUTDP ; </script>

00

Google 表單 － 建立免費雲端資料庫 增加資料庫內容

Google 表單 － 建立免費雲端資料庫
增加資料庫內容

1)

打開表單網址 : ⇩
https://docs.google.com/forms/d/e/1FAIpQLScU5fih1n_-3CD0ITEYMrRLUw8LOkxkr97JIDzH2e0EwBQNlA/viewform，

2)

在表單網址 按右鍵 檢查,再按 Ctrl F 出現尋找欄,鍵入 entry，你會找到 ⇩
   <input type="hidden" name="entry.733842791" value="">
   <input type="hidden" name="entry.1225150890" value="">
   <input type="hidden" name="entry.2105973079" value="">
   <input type="hidden" name="entry.29636400" value="">

第1個 input 內 entry.733842791 相對表單內第1個 姓名 欄輸入 key : entry.733842791
第2個 input 內 entry.1225150890 相對表單內第2個 姓別 欄輸入 key : entry.1225150890
第3個 input 內 entry.2105973079 相對表單內第3個 中文成績 欄輸入 key : entry.2105973079
第4個 input 內 entry.29636400 相對表單內第4個 英文成績 欄輸入 key : entry.29636400

3)

把 表單網址 後方 viewform 改為 formResponse ,
在 formResponse 後方加入 entry.733842791=陳大文&entry.1225150890=女&entry.2105973079=85&entry.29636400=70&submit=Submit,
成為: https://docs.google.com/forms/d/e/1FAIpQLScU5fih1n_-3CD0ITEYMrRLUw8LOkxkr97JIDzH2e0EwBQNlA/formResponse?entry.733842791=陳大文&entry.1225150890=女&entry.2105973079=85&entry.29636400=70&submit=Submit ,
這樣 ( 陳大文 , 女 , 85 , 70 ) 增加到 資料庫內。

姓名 <input size="6" id="IN1" onmouseover="this.focus()" type="text" />       <input type="radio" name="MF" value="男" checked="checked">男 <input type="radio" name="MF" value="女">女       中文成績 <input size="2" id="IN3" onmouseover="this.focus()" type="text" />             英文成績 <input size="2" id="IN4" onmouseover="this.focus()" type="text" />       <input onclick="UPload()" type="button" value="提交" /><br><br><iframe id="ifd" src="" style="display:none"></iframe><div id="DP"></div> <script type="text/javascript" >function UPload(){ clearTimeout(idT); var MF = "男" ; x = document.getElementsByName("MF") ; if (x[1].checked) {MF = "女"} ; var IFsrc = "https://docs.google.com/forms/d/e/1FAIpQLScU5fih1n_-3CD0ITEYMrRLUw8LOkxkr97JIDzH2e0EwBQNlA/formResponse?" ; IFsrc += "entry.733842791=" + IN1.value ; IFsrc += "&entry.1225150890=" + MF ; IFsrc += "&entry.2105973079=" + IN3.value ; IFsrc += "&entry.29636400=" + IN4.value ; IFsrc += "&submit=Submit" ; ifd.src = IFsrc ; var idT = setTimeout ( DPF, 1000 ); } function DPF(){ var xhr = new XMLHttpRequest(); xhr.open("GET", "https://spreadsheets.google.com/feeds/list/1PRmmN4YIBeWxnZOfYBslyCMryBmg_joWGGJAlAs4-hM/1/public/values?alt=json-in-script", false); xhr.send(); var json = xhr.responseText; var obj = JSON.parse(json.slice(28,json.length-2)); var spData=obj.feed.entry; var OUTDP = ""; OUTDP += "spData.length = " + spData.length + " (合共有" + spData.length + "筆資料)<br><br>"; OUTDP += "<table border='1' width='80%'><tbody>"; OUTDP += "</tr><td>姓名 " ; OUTDP += "</td><td>姓別 " ; OUTDP += "</td><td>中文成績" ; OUTDP += "</td><td>英文成績" ; for(var i=0 ; i<spData.length ;i++){ OUTDP += "</tr><td>" + spData[i].gsx$姓名.$t ; OUTDP += "</td><td>" + spData[i].gsx$姓別.$t ; OUTDP += "</td><td>" + spData[i].gsx$中文成績.$t ; OUTDP += "</td><td>" + spData[i].gsx$英文成績.$t ; } OUTDP += "</tbody></table>" ; DP.innerHTML = OUTDP ; } DPF() ; </script>

00