彰化一整天的論壇

 找回密碼
 立即註冊
樓主: imingho

【Google表單教學】如何設計訂單查詢系統

[複製鏈接]
發表於 2021-7-10 18:09:30 | 顯示全部樓層
本帖最後由 heroillsg 於 2021-7-10 18:10 編輯

謝謝老師不吝指導^^
請問老師  我只要改變函數或變數(還是兩個都要改?) 就能在同一個頁面執行嗎??
還是有難度?? 要改更多??? 謝謝撥空指導 感恩♥
回復 支持 反對

使用道具 舉報

 樓主| 發表於 2021-7-10 20:11:21 | 顯示全部樓層
本帖最後由 imingho 於 2021-7-10 20:21 編輯
heroillsg 發表於 2021-7-10 18:09
謝謝老師不吝指導^^
請問老師  我只要改變函數或變數(還是兩個都要改?) 就能在同一個頁面執行嗎??
還是有 ...

您先把後端寫法測試沒問題,前端大概像這樣.
  1. <html>
  2. <head>
  3. <meta charset="UTF-8" />
  4. <script type="text/javascript">
  5. function showHint(field,str)
  6. {
  7. var xmlhttp;

  8.         if (window.XMLHttpRequest)
  9.           {// code for IE7+, Firefox, Chrome, Opera, Safari
  10.           xmlhttp=new XMLHttpRequest();
  11.           }
  12.         else
  13.           {// code for IE6, IE5
  14.           xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  15.           }
  16.         xmlhttp.onreadystatechange=function()
  17.           {
  18.                   if (xmlhttp.readyState==4 && xmlhttp.status==200)      
  19.                   {
  20.                         var result=xmlhttp.responseText;
  21.                         var obj = JSON.parse(result);//解析json字串為json物件形式
  22.                                                 
  23.                         var html = '<table border=1 width=100%>';//
  24.                         
  25.                         for (var i = 0; i < obj.length; i ++ ) {//
  26.                                 html  += '<tr>';//
  27.                                 for(j=0;j<obj[i].data.length;j++)
  28.                                 {
  29.                                   html+= '<td>'+obj[i].data[j]+'</td>';
  30.                                 }
  31.                                 html  += '</tr>';            
  32.                         }
  33.                         html+="</table>";
  34.                         
  35.                         document.getElementById("order_status").innerHTML=html;
  36.                         if(obj.length==1) //只有一筆代表查不到資料
  37.                                 alert('查無資料');
  38.                   }

  39.           }
  40.     var url="https://script.google.com/macros/s/AKfycbzOfZXu0CySWqO99ufbHgJB1RbG3K5todpn3piM0ZSHKxHlL2o/exec";
  41.         xmlhttp.open("get",url+"?"+field+"="+encodeURIComponent(str),true);
  42.         xmlhttp.send();
  43. }
  44. </script>
  45. </head>
  46. <body>

  47. 輸入姓名:<input type="text" id="name" />
  48. <input type="button" name="inq" value="查詢" onclick="showHint("name",name.value);"></br>
  49.   輸入電話:<input type="text" id="Mobile)" />
  50.   <input type="button" name="inq" value="查詢" onclick="showHint("Mobile",Mobile.value);"></br>
  51.   輸入車牌:<input type="text" id="license" />
  52.   <input type="button" name="inq" value="查詢" onclick="showHint("license",license.value);"></br>

  53. <span id="order_status"></span>
  54. </body>
  55. </html>
複製代碼


回復 支持 反對

使用道具 舉報

發表於 2021-8-6 09:08:09 | 顯示全部樓層
本帖最後由 jenny2003girl 於 2021-8-6 10:41 編輯

版主您好,我有幾個問題想請教版主:1.設定「查詢表格轉置、表格內容文字置中」,修改程式碼如下,但是呈現出來只有右邊欄位成功,左邊欄位不確定問題出在哪裡。
2.另外,第三列及第六列想要填滿表格顏色。
謝謝!!
  1. <html>
  2. <head>
  3. <meta charset="UTF-8"></meta>
  4. <script type="text/javascript">
  5. Date.prototype.format = function(fmt)
  6. {
  7.   var o = {
  8.     "M+" : this.getMonth()+1, //月份
  9.     "d+" : this.getDate(), //日
  10.     "h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小時
  11.     "H+" : this.getHours(), //小時
  12.     "m+" : this.getMinutes(), //分
  13.     "s+" : this.getSeconds(), //秒
  14.     "q+" : Math.floor((this.getMonth()+3)/3), //季度
  15.     "S" : this.getMilliseconds() //毫秒

  16.   };
  17.   if(/(y+)/.test(fmt))
  18.     fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
  19.   for(var k in o)
  20.     if(new RegExp("("+ k +")").test(fmt))
  21.   fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
  22.   return fmt;
  23. }

  24. var dateReviver = function (key, value) {
  25.     var a;
  26.     if (typeof value === 'string') {
  27.         a = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
  28.         if (a) {
  29.             return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4], +a[5], +a[6])).format("yyyy-MM-dd HH:mm:ss");
  30.         }
  31.     }
  32.     return value;
  33. };
  34. function bestdaylong_inq(ID,VOTE1,VOTE2)
  35. {
  36. var xmlhttp;

  37.         if (window.XMLHttpRequest)
  38.           {// code for IE7+, Firefox, Chrome, Opera, Safari
  39.           xmlhttp=new XMLHttpRequest();
  40.           }
  41.         else
  42.           {// code for IE6, IE5
  43.           xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  44.           }
  45.         xmlhttp.onreadystatechange=function()
  46.           {
  47.                   if (xmlhttp.readyState==4 && xmlhttp.status==200)      
  48.                   {
  49.                         var result=xmlhttp.responseText;
  50.                         var obj = JSON.parse(result,dateReviver);//解析json字串為json物件形式
  51.                                                 
  52.                          var html = '<table border=1 width=100%>';//
  53.                         
  54.                        for (var i = 0; i < obj[0].data.length; i ++ ) {//
  55.                                 html  += '<tr>';//
  56.                                                                 html+= '<td>'+obj[0].data[i]+'</td>';
  57.                                 for(j=1;j<obj.length;j++)
  58.                                 {
  59.                                   html+= '<td align="center">'+obj[j].data[i]+'</td>';

  60.                                 }
  61.                                 html  += '</tr>';            
  62.                         }

  63.                         html+="</table>";
  64.                         
  65.                         document.getElementById("order_status").innerHTML=html;
  66.                         if(obj.length==1) //只有一筆代表查不到資料
  67.                                 alert('請再次確認身分證字號是否有誤!(非本校編制內教師不具投票資格)');
  68.                   }

  69.           }
  70.     var url="https://script.google.com/macros/s/AKfycbxTpDSQMMByhpDUH2vNbQ-NTgOy2BT5O20iXq-rJf7YRit7dPYVlNLobjelKdERp6O9/exec";
  71.     xmlhttp.open("get",url+"?ID="+ID+"&VOTE1="+VOTE1+"&VOTE2="+VOTE2,true);
  72.     xmlhttp.send();
  73. }
  74. </script>
  75. </head>
  76. <body>

  77. <p><font size="4"><b>【110學年度考核委員及教評委員選舉-投票說明】<br /></font></p>
  78. <p><font size="4"><b>1.投票資格:本校編制內教師。<br /></font></p>
  79. <p><font size="4"><b>2.投票時間:110年8月5日上午8:00至下午5:00止。<br /></font></p>

  80. <p><font size="4"><b>3.投票方式:本校110學年度考核委員及教評委員選舉以線上投票辦理,本次選舉候選人名單已公告於各領域LINE群組,請參照候選人名單,每人得圈選1位考核委員候選人及1位教評委員候選人,請於下方欄位輸入<font color="#1F45FC">「投票者身分證字號」</font>、<font color="#1F45FC">「考核委員候選人編號」</font>、<font color="#1F45FC">「教評委員候選人編號」</font>後按<font color="#1F45FC">「送出」</font>。<br /></font></p>
  81. <p><font size="4"><b>4.您的投票結果將顯示於下方表格,如要進行修正,請重新執行上述步驟,再次按「送出」即可。<br /></font></p>


  82. <p><font size="4"><b><font color="#FF0000">投票人員身分證字號:</font><font color="#1F45FC"><input id="ID" type="text" /></font></b></font><br /></p>
  83. <p><font size="4"><b><font color="#FF0000">考核委員候選人編號:</font><font color="#1F45FC"><input id="VOTE1" type="text" /></font></b></font><br /></p>
  84. <p><font size="4"><b><font color="#FF0000">教評委員候選人編號:</font><font color="#1F45FC"><input id="VOTE2" type="text" /></font> <input name="inq" onclick="bestdaylong_inq(ID.value,VOTE1.value,VOTE2.value);" type="button" value="送出" /></b></font><br /></p>

  85. <span id="order_status"></span>
  86. </body>
  87. </html>
複製代碼


未命名.png
回復 支持 反對

使用道具 舉報

 樓主| 發表於 2021-8-6 11:59:59 | 顯示全部樓層
jenny2003girl 發表於 2021-8-6 09:08
版主您好,我有幾個問題想請教版主:1.設定「查詢表格轉置、表格內容文字置中」,修改程式碼如下,但是呈 ...

請將
  1. html+= '<td>'+obj[0].data[i]+'</td>';
複製代碼

改成
  1. html+= '<td align="center">'+obj[0].data[i]+'</td>';
複製代碼
回復 支持 反對

使用道具 舉報

發表於 2021-8-6 14:01:45 | 顯示全部樓層

大感謝~~~已經成功了!!!
另外我有參考「google表單訂單查詢(div)加某一列字變色」這篇文章的想法,嘗試把第三列和第六列表格填滿顏色,但一直寫不出來,想再來請教版主,謝謝
回復 支持 反對

使用道具 舉報

 樓主| 發表於 2021-8-6 14:48:13 | 顯示全部樓層
jenny2003girl 發表於 2021-8-6 14:01
大感謝~~~已經成功了!!!
另外我有參考「google表單訂單查詢(div)加某一列字變色」這篇文章的想法, ...
  1.   if(i==2 || i==5)//第3列或5列底色變紅色
  2.         html+= '<td><font bgcolor=red>'+obj[j].data[i]+'</font></td>';
  3.   else
  4.         html+= '<td>'+obj[j].data[i]+'</td>';
複製代碼
回復 支持 反對

使用道具 舉報

發表於 2021-8-6 15:02:27 | 顯示全部樓層

請問應該要加在哪裡呢?謝謝
  1. <html>
  2. <head>
  3. <meta charset="UTF-8"></meta>
  4. <script type="text/javascript">
  5. Date.prototype.format = function(fmt)
  6. {
  7.   var o = {
  8.     "M+" : this.getMonth()+1, //月份
  9.     "d+" : this.getDate(), //日
  10.     "h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小時
  11.     "H+" : this.getHours(), //小時
  12.     "m+" : this.getMinutes(), //分
  13.     "s+" : this.getSeconds(), //秒
  14.     "q+" : Math.floor((this.getMonth()+3)/3), //季度
  15.     "S" : this.getMilliseconds() //毫秒

  16.   };
  17.   if(/(y+)/.test(fmt))
  18.     fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
  19.   for(var k in o)
  20.     if(new RegExp("("+ k +")").test(fmt))
  21.   fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
  22.   return fmt;
  23. }

  24. var dateReviver = function (key, value) {
  25.     var a;
  26.     if (typeof value === 'string') {
  27.         a = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
  28.         if (a) {
  29.             return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4], +a[5], +a[6])).format("yyyy-MM-dd HH:mm:ss");
  30.         }
  31.     }
  32.     return value;
  33. };
  34. function bestdaylong_inq(ID,VOTE1,VOTE2)
  35. {
  36. var xmlhttp;

  37.         if (window.XMLHttpRequest)
  38.           {// code for IE7+, Firefox, Chrome, Opera, Safari
  39.           xmlhttp=new XMLHttpRequest();
  40.           }
  41.         else
  42.           {// code for IE6, IE5
  43.           xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  44.           }
  45.         xmlhttp.onreadystatechange=function()
  46.           {
  47.                   if (xmlhttp.readyState==4 && xmlhttp.status==200)      
  48.                   {
  49.                         var result=xmlhttp.responseText;
  50.                         var obj = JSON.parse(result,dateReviver);//解析json字串為json物件形式
  51.                                                 
  52.                          var html = '<table border=1 width=100%>';//
  53.                         
  54.                        for (var i = 0; i < obj[0].data.length; i ++ ) {//
  55.                                 html  += '<tr>';//
  56.                                                                 html+= '<td align="center">'+obj[0].data[i]+'</td>';
  57.                                 for(j=1;j<obj.length;j++)
  58.                                 {
  59.                                   html+= '<td align="center">'+obj[j].data[i]+'</td>';
  60.                                 }
  61.                                 html  += '</tr>';            
  62.                         }

  63.                         html+="</table>";
  64.                         
  65.                         document.getElementById("order_status").innerHTML=html;
  66.                         if(obj.length==1) //只有一筆代表查不到資料
  67.                                 alert('請再次確認身分證字號是否有誤!(非本校編制內教師不具投票資格)');
  68.                   }

  69.           }
  70.     var url="https://script.google.com/macros/s/AKfycbxTpDSQMMByhpDUH2vNbQ-NTgOy2BT5O20iXq-rJf7YRit7dPYVlNLobjelKdERp6O9/exec";
  71.     xmlhttp.open("get",url+"?ID="+ID+"&VOTE1="+VOTE1+"&VOTE2="+VOTE2,true);
  72.     xmlhttp.send();
  73. }
  74. </script>
  75. </head>
  76. <body>

  77. <p><font size="4"><b>【110學年度考核委員及教評委員選舉-投票說明】<br /></font></p>
  78. <p><font size="4"><b>1.投票資格:本校編制內教師。<br /></font></p>
  79. <p><font size="4"><b>2.投票時間:110年8月5日上午8:00至下午5:00止。<br /></font></p>

  80. <p><font size="4"><b>3.投票方式:本校110學年度考核委員及教評委員選舉以線上投票辦理,本次選舉候選人名單已公告於各領域LINE群組,請參照候選人名單,每人得圈選1位考核委員候選人及1位教評委員候選人,請於下方欄位輸入<font color="#1F45FC">「投票者身分證字號」</font>、<font color="#1F45FC">「考核委員候選人編號」</font>、<font color="#1F45FC">「教評委員候選人編號」</font>後按<font color="#1F45FC">「送出」</font>。<br /></font></p>
  81. <p><font size="4"><b>4.您的投票結果將顯示於下方表格,如要進行修正,請重新執行上述步驟,再次按「送出」即可。<br /></font></p>


  82. <p><font size="4"><b><font color="#FF0000">投票人員身分證字號:</font><font color="#1F45FC"><input id="ID" type="text" /></font></b></font><br /></p>
  83. <p><font size="4"><b><font color="#FF0000">考核委員候選人編號:</font><font color="#1F45FC"><input id="VOTE1" type="text" /></font></b></font><br /></p>
  84. <p><font size="4"><b><font color="#FF0000">教評委員候選人編號:</font><font color="#1F45FC"><input id="VOTE2" type="text" /></font> <input name="inq" onclick="bestdaylong_inq(ID.value,VOTE1.value,VOTE2.value);" type="button" value="送出" /></b></font><br /></p>

  85. <span id="order_status"></span>
  86. </body>
  87. </html>
複製代碼
回復 支持 反對

使用道具 舉報

 樓主| 發表於 2021-8-6 15:16:44 | 顯示全部樓層
jenny2003girl 發表於 2021-8-6 15:02
請問應該要加在哪裡呢?謝謝
  1. <html>
  2. <head>
  3. <meta charset="UTF-8"></meta>
  4. <script type="text/javascript">
  5. Date.prototype.format = function(fmt)
  6. {
  7.   var o = {
  8.     "M+" : this.getMonth()+1, //月份
  9.     "d+" : this.getDate(), //日
  10.     "h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小時
  11.     "H+" : this.getHours(), //小時
  12.     "m+" : this.getMinutes(), //分
  13.     "s+" : this.getSeconds(), //秒
  14.     "q+" : Math.floor((this.getMonth()+3)/3), //季度
  15.     "S" : this.getMilliseconds() //毫秒

  16.   };
  17.   if(/(y+)/.test(fmt))
  18.     fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
  19.   for(var k in o)
  20.     if(new RegExp("("+ k +")").test(fmt))
  21.   fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
  22.   return fmt;
  23. }

  24. var dateReviver = function (key, value) {
  25.     var a;
  26.     if (typeof value === 'string') {
  27.         a = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
  28.         if (a) {
  29.             return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4], +a[5], +a[6])).format("yyyy-MM-dd HH:mm:ss");
  30.         }
  31.     }
  32.     return value;
  33. };
  34. function bestdaylong_inq(ID,VOTE1,VOTE2)
  35. {
  36. var xmlhttp;

  37.         if (window.XMLHttpRequest)
  38.           {// code for IE7+, Firefox, Chrome, Opera, Safari
  39.           xmlhttp=new XMLHttpRequest();
  40.           }
  41.         else
  42.           {// code for IE6, IE5
  43.           xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  44.           }
  45.         xmlhttp.onreadystatechange=function()
  46.           {
  47.                   if (xmlhttp.readyState==4 && xmlhttp.status==200)      
  48.                   {
  49.                         var result=xmlhttp.responseText;
  50.                         var obj = JSON.parse(result,dateReviver);//解析json字串為json物件形式
  51.                                                 
  52.                          var html = '<table border=1 width=100%>';//
  53.                         
  54.                        for (var i = 0; i < obj[0].data.length; i ++ ) {//
  55.                                                                 if(if(i==2 || i==5)//第3列或5列底色變紅色)
  56.                                                                         html  += '<tr bgcolor="red">';//
  57.                                                                 else
  58.                                                                         html  += '<tr">';
  59.                                 html+= '<td align="center">'+obj[0].data[i]+'</td>';
  60.                                 for(j=1;j<obj.length;j++)
  61.                                 {
  62.                                   html+= '<td align="center">'+obj[j].data[i]+'</td>';
  63.                                 }
  64.                                 html  += '</tr>';            
  65.                         }

  66.                         html+="</table>";
  67.                         
  68.                         document.getElementById("order_status").innerHTML=html;
  69.                         if(obj.length==1) //只有一筆代表查不到資料
  70.                                 alert('請再次確認身分證字號是否有誤!(非本校編制內教師不具投票資格)');
  71.                   }

  72.           }
  73.     var url="https://script.google.com/macros/s/AKfycbxTpDSQMMByhpDUH2vNbQ-NTgOy2BT5O20iXq-rJf7YRit7dPYVlNLobjelKdERp6O9/exec";
  74.     xmlhttp.open("get",url+"?ID="+ID+"&VOTE1="+VOTE1+"&VOTE2="+VOTE2,true);
  75.     xmlhttp.send();
  76. }
  77. </script>
  78. </head>
  79. <body>

  80. <p><font size="4"><b>【110學年度考核委員及教評委員選舉-投票說明】<br /></font></p>
  81. <p><font size="4"><b>1.投票資格:本校編制內教師。<br /></font></p>
  82. <p><font size="4"><b>2.投票時間:110年8月5日上午8:00至下午5:00止。<br /></font></p>

  83. <p><font size="4"><b>3.投票方式:本校110學年度考核委員及教評委員選舉以線上投票辦理,本次選舉候選人名單已公告於各領域LINE群組,請參照候選人名單,每人得圈選1位考核委員候選人及1位教評委員候選人,請於下方欄位輸入<font color="#1F45FC">「投票者身分證字號」</font>、<font color="#1F45FC">「考核委員候選人編號」</font>、<font color="#1F45FC">「教評委員候選人編號」</font>後按<font color="#1F45FC">「送出」</font>。<br /></font></p>
  84. <p><font size="4"><b>4.您的投票結果將顯示於下方表格,如要進行修正,請重新執行上述步驟,再次按「送出」即可。<br /></font></p>


  85. <p><font size="4"><b><font color="#FF0000">投票人員身分證字號:</font><font color="#1F45FC"><input id="ID" type="text" /></font></b></font><br /></p>
  86. <p><font size="4"><b><font color="#FF0000">考核委員候選人編號:</font><font color="#1F45FC"><input id="VOTE1" type="text" /></font></b></font><br /></p>
  87. <p><font size="4"><b><font color="#FF0000">教評委員候選人編號:</font><font color="#1F45FC"><input id="VOTE2" type="text" /></font> <input name="inq" onclick="bestdaylong_inq(ID.value,VOTE1.value,VOTE2.value);" type="button" value="送出" /></b></font><br /></p>

  88. <span id="order_status"></span>
  89. </body>
  90. </html>
複製代碼
回復 支持 反對

使用道具 舉報

發表於 2021-8-15 23:22:08 | 顯示全部樓層
imingho 發表於 2021-6-22 17:35
您可以使用

或是用getSheets()取得所有的工作表再用迴圈去讀取每一個工作表

老師您好,我是駑鈍之才,您的這兩個語法,我在您的例子裡,怎麼擺都不成功,請問究竟該擺哪裡是好呢?
回復 支持 反對

使用道具 舉報

 樓主| 發表於 2021-8-16 09:37:43 | 顯示全部樓層
teamwk55 發表於 2021-8-15 23:22
老師您好,我是駑鈍之才,您的這兩個語法,我在您的例子裡,怎麼擺都不成功,請問究竟該擺哪裡是好呢? ...

您好,  
請麻煩您參考.
如何在discuz張貼程式碼
http://discuz.bestdaylong.com/thread-30239-1-1.html

請貼上您在後遧端的程式碼.我們再來討論
回復 支持 反對

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 立即註冊

本版積分規則

Archiver|手機版|小黑屋|彰化一整天的論壇(Excel,Office)

GMT+8, 2021-9-21 17:24 , Processed in 0.111846 second(s), 16 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回復 返回頂部 返回列表