10/31 MIS

Google Drive 新增試算表發布到網路上

http://nchu-mis-html5.blogspot.com/2017/07/tabletopjs.html

Drive 試算表

第一列變數的名稱不要夾空白

https://docs.google.com/spreadsheets/d/e/2PACX-1vTgCqwdL9P3NIkOs_OBHGZOgiPFGbXI9XYJ2CrghRJVN_3T7vy_gfiyzowPvvFtWpxVq32TQpS6hehT/pubhtml

他要的不是這個網址而是編輯試算表的網址

https://docs.google.com/spreadsheets/d/1zvMtUGhlndnPRPiGdZoapAfTsJTxLJONzpE94gMa_g/edit#gid=0

欄位名稱不要有空白

https://docs.google.com/spreadsheets/d/1z-vMtUGhlndnPRPiGdZoapAfTsJTxLJONzpE94gMa_g/edit#gid=0

Callback 分機號碼 key

AddEventListener 網址： https://www.w3schools.com/jsref/met_element_addeventlistener.asp

不一定是綁一個按鈕，也可以是綁一個區域

語法：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Tabletop.js範例程式</title>


<script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
<script type='text/javascript'>
// 於Google Spreadsheet建立的範例資料為 https://docs.google.com/spreadsheets/d/e/2PACX-1vR9LivzlVjV3Mp9EOw0rCh46tDacBY6uQ8AT4k6ObLecvL8P-BpgKza9IOyGfFkP3tEdNSereSt8wxT/pubhtml
var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1z-vMtUGhlndnPRPiGdZoapAfTsJTxLJONzpE94gMa_g/pubhtml';

試算表編輯網址取代紅色的地方

function init() {
Tabletop.init( { key: publicSpreadsheetUrl,
callback: showInfo,
simpleSheet: true } )
}

function showInfo(data, tabletop) {
// alert('Successfully processed!')
console.log(data);

var str = "";
for (var i=0; i<data.length; i++) { //陣列
// 於Google Spreadsheet建立的範例資料A欄命名為name、B欄命名為telephone、c欄命名為lunchbox、d欄命名為order
str += data[i].name + "(" + data[i].telephone + ")" + " 訂 " + data[i].lunchbox + " : " + data[i].order + "份 <br />";
}
document.getElementById("demo").innerHTML = str;
}

window.addEventListener('DOMContentLoaded', init)
</script>
<head>

<body>
<div id="demo"></div>
</body>
</html> //json格式寫法

Json https://www.w3schools.com/js/js_json.asp （與上面有關）

用中文記得不要有空格

Google表單傳送數量第一排不要打太多中文字包含空格跟括號

用表單建立最新消息（網站最新消息）（老師推薦）

ＪＳ function. http://jsfiddle.net/2x80jm8a/

語法（連結上次的ｐａｉｄ）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Tabletop.js範例程式</title>


<script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
<script type='text/javascript'>
// 於Google Spreadsheet建立的範例資料為 https://docs.google.com/spreadsheets/d/e/2PACX-1vR9LivzlVjV3Mp9EOw0rCh46tDacBY6uQ8AT4k6ObLecvL8P-BpgKza9IOyGfFkP3tEdNSereSt8wxT/pubhtml
var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1YSxrrZGR8iVCryP7Kt292HgXOYAdKMbPnsWIOpj6rEk/pubhtml';

function init() {
Tabletop.init( { key: publicSpreadsheetUrl,
callback: showInfo,
simpleSheet: true } )
}

function showInfo(data, tabletop) {
// alert('Successfully processed!')
console.log(data);

var i = decodeURIComponent(GetUrlVar('num')); //第二次程式碼加的

var str = "";
//for (var i=0; i<data.length; i++) { //第一次程式碼要留下來了的
// 於Google Spreadsheet建立的範例資料A欄命名為name、B欄命名為telephone、c欄命名為lunchbox、d欄命名為order
str += data[i].時間戳記 + data[i].姓名 + "(" + data[i].電話 + ")" + " 訂 " + data[i].便當種類 + " : " + data[i].份數 + "份 <br />";
//}
document.getElementById("demo").innerHTML = str;
}

window.addEventListener('DOMContentLoaded', init)

function GetUrlVar(VarName)
{
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + VarName + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if (results == null)
return "";
else
return results[1];
}

</script>
<head>

<body>
<div id="demo"></div>
</body>
</html>

結合上週功課把var轉成表單讀取表單的資料程式碼就不會有陣列的程式碼

Goal 1 先把陣列轉換成表單

Goal 2 再加入超連結

MIS note

10/31 MIS

沒有留言:

張貼留言

Popular

Pages