Tabletop.js takes a Google Spreadsheet and makes it easily accessible through JavaScript.
- Step One: make a Google Spreadsheet and "Publish to Web."
- Step Two: Write a page that invokes Tabletop with the published URL Google gives you. (triggered by addEventListener )
- Step Three: Enjoy your data!
於Google Spreadsheet建立的範例資料 (已設定發佈到網路) ，再用下列範例程式讀取資料。
初始範例(jsfiddle、jsbin)
二版範例(jsfiddle、jsbin) (access JSON data)
但是，Tabletop.js作者提醒2020即將出問題
Tabletop was created in about 1995, back when we had to remember to disable call waiting when dialing into Compuserve. Now that it's 2020, Google is shutting down the infrastructure that Tabletop relies on.
那麼，我們開始改用Google Chart讀取Google試算表吧~
那麼，我們開始改用Google Chart讀取Google試算表吧~
範例(jsfiddle、jsbin)
Google Form成為Google Spreadsheet的資料輸入方式。(Google Form題目名稱即是Google Spreadsheet的欄位名稱，可以是中文，但不能有空白。) 再將Google Form的取得預先填入的連結套用到我們的自己的程式(jsfiddle、jsbin，就能在自己的程式介面下將填寫資料並送進Google Spreadsheet。(不過，在這之前大家要先了解HTML Formsm語法、Input Types，然後再用Materialize CSS的Form語法將版面美化。)
各種網站的設計，必然有部分頁面的內容會經常補充更新，像是最新消息公告、師資介紹列表...等，這些資料通常都是以表格形式呈現，但若用原始的HTML Tables語法太陽春，而且筆數較多時還要分頁顯示。改成用DataTables，先讀取Google Sheet試算表資料再轉為Datatable呈現為表格形式，兩個範例程式在此(jsbin、jsbin)，說明詳見此網頁。
Google Form成為Google Spreadsheet的資料輸入方式。(Google Form題目名稱即是Google Spreadsheet的欄位名稱，可以是中文，但不能有空白。) 再將Google Form的取得預先填入的連結套用到我們的自己的程式(jsfiddle、jsbin，就能在自己的程式介面下將填寫資料並送進Google Spreadsheet。(不過，在這之前大家要先了解HTML Formsm語法、Input Types，然後再用Materialize CSS的Form語法將版面美化。)
各種網站的設計，必然有部分頁面的內容會經常補充更新，像是最新消息公告、師資介紹列表...等，這些資料通常都是以表格形式呈現，但若用原始的HTML Tables語法太陽春，而且筆數較多時還要分頁顯示。改成用DataTables，先讀取Google Sheet試算表資料再轉為Datatable呈現為表格形式，兩個範例程式在此(jsbin、jsbin)，說明詳見此網頁。
