用户投稿直接把整个试算表连结发给别人除了要载入很久且会出现一堆不需要的按键，整个画面很丑很没有质感。而且如果你把其他隐私的资料也放在里面，都会被一次看光光。那我们就来帮试算表包个糖衣吧。
本篇文章来自毛哥EM资讯密技，较长的程式码会摺叠。如果你觉得这篇文章有帮助到你欢迎在Instagram或Google新闻追蹤给一点鼓励
当你要分享表格给其他人看时，使用Google试算表把连结贴给别人是一个简单快速的方法。除了可以套各种公式，修改资料会马上同步，也可以开设权限让其他人一起编辑。
罢特如果只是要给别人看资料比如说客户名单、订单资讯、直接把整个试算表连结发给别人除了要载入很久且会出现一堆不需要的按键，整个画面很丑很没有质感。而且如果你把其他隐私的资料也放在里面，都会被一次看光光。
怎么办？帮它抹上一层糖衣！
我们来做一个超简单的小网页让它自己去表格抓你要的资料来显示。我们会写一些程式(HTML,CSS,Js）不过如果你不会也没关系w只要跟着步骤複製贴上就可以了。今天我要来帮我的画家朋友萨波来做一个网站让他的委託人可以查看他画图的进度，还要让电脑排序让已经完成的委託排在下面。成果:毛哥EM的基地
架一个网站
你可以使用任何一个可以给你存放网站代码的地方，比如说Github。
我从Codepen上找到了一个很好看的表格模板来做修改。它在萤幕尺寸太窄的时候会用不同的版面来显示，保持使用者体验。你也可以找其他的模板或者是自己建立一个。
我在网站上增加了一点文字、颜色(CSS)、超连结(<a>)、还有图片、缩图。以及简单的出场动画(animate.css)来炫技。
<!DOCTYPE html> <head> <meta charset="utf-8" /> <!--下面这行是标题--> <title>萨波进度查询表</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!--下面这行是缩图，可以换网址--> <link href="https://Edit-Mr.github.io/code/sabooo/thumbnail.png" rel="icon" type="image/x-icon"> <link rel="stylesheet" type="text/css" href="https://Edit-Mr.github.io/css/Animate.css" media="screen"> <!--下面这行是主题颜色，可以自由更换（支援HEX）--> <meta name="theme-color" content="orange" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!--下面这些是样式，可以自由更换颜色之类的--> <style> @import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css); body { font-family: "Arial","cwTeXYen","微软正黑体"; background-color: #fee5bd; } .container { max-width: 1000px; margin-left: auto; margin-right: auto; padding-left: 10px; padding-right: 10px; font-size: 25px; } h2 { font-size: 23px; margin: 0; text-align: center; font-weight: 150; color: #e69137; animation: fadeIn; animation-duration: 1.5s; animate-delay: 0.9s; } h1 { font-size: 35px; margin: 20px 0 0 0; text-align: center; size: 30px; color: #351c75; animation: zoomIn; animation-duration: 1s; } li { border-radius: 3px; padding: 25px 30px; display: flex; justify-content: space-between; margin-bottom: 25px; } .responsive-table .table-header, .table-note { background-color: #f9a756; font-size: 30px; margin-top: 0px; padding: 25px 30px 25px 30px; animation: slideInUp; animation-duration: 1.5s; } .table-note { font-size: 20px; display: none; } .responsive-table { margin: 0; padding: 0; } .responsive-table .table-row { background-color: #fff; box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.1); animation: backInLeft; animation-duration: 1.5s; } .table-row{} .responsive-table .col-1 { flex-basis: 25%; } .responsive-table .col-2 { flex-basis: 30%; } .responsive-table .col-3 { flex-basis: 30%; } .responsive-table .col-4 { flex-basis: 15%; } @media all and (max-width: 767px) { .responsive-table .table-header { display: none; } .table-note { display: block; } .responsive-table li { display: block; } .responsive-table .col { flex-basis: 100%; } .responsive-table .col { display: flex; padding: 10px 0; } .responsive-table .col:before { color: #6c7a89; padding-right: 10px; content: attr(data-label); flex-basis: 50%; text-align: right; } } .header { width: 150px; display: block; margin: auto; animation: slideInUp; animation-duration: 1.5s; } .finished { color: green; } p, a { text-align: center; font-size: 15px; color: #6c7a89; text-decoration: none; animation: fadeIn; animation-duration: 1.5s; } </style> </head> <body> <div class="container"> <h1>萨波2022委託与赠图表</h1> <h2>这些不代表画的顺序 会跳着画</h2> <img src="header.png" class="header" /> <li class="table-note"> 如果要一次看完整表格请切换到电脑版网页喔 </li> <ul class="responsive-table"> <li class="table-header"> <div class="col col-1">委託人姓名</div> <div class="col col-2">委託项目</div> <div class="col col-3">付款状态</div> <div class="col col-4">进度状态</div> </li> 资料载入中 </ul> <p><a href=""></a> · Facebook<a href="https://instagram.com/">Instagram</a><br />Made by <a href="https://github.com/Edit-Mr">Edit Mr.</a> with❤</p> </div> </body>后端 GAS! GAS!
好了前端做好了接下来我们来建另一个网站让刚才那个网站来这里读取资料。为了方便起见我们在给资料的时候直接给一个做好的表格让网站贴上。
我们先看一下试算表。在这里我们可以看到每一行资料有5项，其中我希望第5项的资料可以放在付款状态后面。现在请你先请你複製这个试算表的ID，也就是网址https://docs.google.com/spreadsheets/d/和/之间那一串(如1fjX-prGu0hfb65LCQkrktWa-JavvjSz7tWMmYWAb7RA)。等一下会用到。
我们会使用GAS(Google App Script)来建立网页应用程式来读取表格资料。
请到script.google.com 建立一个新的专案并贴上以下内容。记得贴上Google Sheet那段ID，并修改自己要的範围，程式码里有详细的注解。原理是读取一行行的资料并转成HTML表格，其中如果状态是完成的加上一个class让颜色变绿色。在排序方面我是把完成的和未完成的分成两个阵列（清单）储存，在把完成的接在未完成的后面合併。
function doGet(){ var spreadsheet = SpreadsheetApp.openById('1U-Q2XXXXXXXRsrh-QYCXXXXXXXXXQmGQ'); // Sheet id var sheet = spreadsheet.getSheets()[0]; var rowLength = sheet.getLastRow(); var columnLength = sheet.getLastColumn(); var data = sheet.getRange(3,1,rowLength,columnLength).getValues(); var dataExport = ['<li class="table-header"><div class="col col-1">委託人姓名</div><div class="col col-2"++>委託项目</div><div class="col col-3">付款状态</div><div class="col col-4">进度状态</div></li>']; var stat, ed=[]; // 一个个加入json for(i in data){ if(data[i][0] != ""){ if (data[i][3]=="完成"){ ed.push('<li class="table-row"><div class="col col-1" data-label="委託人姓名">'+data[i][0]+'</div><div class="col col-2" data-label="委託项目">'+data[i][1]+'</div><div class="col col-3" data-label="付款状态">'+data[i][2]+" "+data[i][4]+'</div><div class="col col-4 finished" data-label="进度状态">'+data[i][3]+'</div></li>') }else{ dataExport.push('<li class="table-row"><div class="col col-1" data-label="委託人姓名">'+data[i][0]+'</div><div class="col col-2" data-label="委託项目">'+data[i][1]+'</div><div class="col col-3" data-label="付款状态">'+data[i][2]+" "+data[i][4]+'</div><div class="col col-4" data-label="进度状态">'+data[i][3]+'</div></li>') } }; }; dataExport=dataExport.concat(ed); // 回传JSON console.log(dataExport.join("")); return ContentService.createTextOutput(dataExport.join("")); }{{% notice notice "为什么要分两个阵列？不要让未完成的直接插入到最前面？" %}}
我们可以用push()将资料插入到最后面，也可以用unshift()插入到最前面。但是如果用这个方式未完成的清单顺序会整个便相反
如顺序1234567排序后不会变124589367，而是985421367。
你可以根据自己的需求决定排法
{{% /notice %}}
做好了之后点击执行▶️，你会需要授予你的程式读取资料的权限。因为你写的程式没有被Google验证过所以会显示不安全，但我相信你不会把你的帐号搞爆，对吧
接下来我们要部署它，让它成为一个网站来让我们抓。这里选择网页应用程式，所有人都以你的身份读取。按下部署就可以啰
这里我们把部署的网址複製起来。如果要做修改除了按储存之外要记得重新部署成新版本才会更新喔
接下来我们回到Github的网页让他来读这个表格
等等，不是做好表格网页了，直接让它显示就好了啊干嘛那么麻烦？
可以当然是可以，姑且不论网址有多长多丑，如果使用Google App Script建设的网站会出现横幅很丑的一个警告，而且他超长让你的版面整个跑掉。为了更好的使用者体验既然都做了就做到底吧！
前端 读取资料
最后一步了！我们回到程式码的head里面，加入jQuery这个套件让我们可以少写几行
然后我们修改一下body。程式读到表格之后会用表格取代class里面的所有内容。我已在这里可以写一些表格读取到之前会显示的讯息比如说「资料读取中...」之类的。
最后在我们在</body>前面贴上以下的JavaScript来读取并显示表格。记得把网址换成刚刚表格资料的网址喔~
<script> //请把下面按这串改成刚才的网址 let requestURL = "https://script.google.com/macros/s/AKfycbxq942U9fZK5tR6Vi1OZkr5Hq0Bv_qPSm1rOOYFFZUS_vyrTu60QuW7xmU-d09UpI1XLQ/exec"; let request = new XMLHttpRequest(); request.open("GET", requestURL); request.responseType = "text"; request.send(); request.onload = function () { console.log("载入成功"); $("p").addClass('animate_animated','animate_fadeOut') //动画 $(".responsive-table").html(request.response); //用表格取代.responsive-table }; </script> 最终程式码
最终的程式码如下，有没有超有成就感？
显示网站
<!DOCTYPE html> <head> <meta charset="utf-8" /> <!--下面这行是标题--> <title>萨波进度查询表</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!--下面这行是缩图，可以换网址--> <link href="https://Edit-Mr.github.io/code/sabooo/thumbnail.png" rel="icon" type="image/x-icon"> <link rel="stylesheet" type="text/css" href="https://Edit-Mr.github.io/css/Animate.css" media="screen"> <!--下面这行是主题颜色，可以自由更换（支援HEX）--> <meta name="theme-color" content="orange" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!--下面这些是样式，可以自由更换颜色之类的--> <style> @import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css); body { font-family: "Arial","cwTeXYen","微软正黑体"; background-color: #fee5bd; } .container { max-width: 1000px; margin-left: auto; margin-right: auto; padding-left: 10px; padding-right: 10px; font-size: 25px; } h2 { font-size: 23px; margin: 0; text-align: center; font-weight: 150; color: #e69137; animation: fadeIn; animation-duration: 1.5s; animate-delay: 0.9s; } h1 { font-size: 35px; margin: 20px 0 0 0; text-align: center; size: 30px; color: #351c75; animation: zoomIn; animation-duration: 1s; } li { border-radius: 3px; padding: 25px 30px; display: flex; justify-content: space-between; margin-bottom: 25px; } .responsive-table .table-header, .table-note { background-color: #f9a756; font-size: 30px; margin-top: 0px; padding: 25px 30px 25px 30px; animation: slideInUp; animation-duration: 1.5s; } .table-note { font-size: 20px; display: none; } .responsive-table { margin: 0; padding: 0; } .responsive-table .table-row { background-color: #fff; box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.1); animation: backInLeft; animation-duration: 1.5s; } .table-row{} .responsive-table .col-1 { flex-basis: 25%; } .responsive-table .col-2 { flex-basis: 30%; } .responsive-table .col-3 { flex-basis: 30%; } .responsive-table .col-4 { flex-basis: 15%; } @media all and (max-width: 767px) { .responsive-table .table-header { display: none; } .table-note { display: block; } .responsive-table li { display: block; } .responsive-table .col { flex-basis: 100%; } .responsive-table .col { display: flex; padding: 10px 0; } .responsive-table .col:before { color: #6c7a89; padding-right: 10px; content: attr(data-label); flex-basis: 50%; text-align: right; } } .header { width: 150px; display: block; margin: auto; animation: slideInUp; animation-duration: 1.5s; } .finished { color: green; } p, a { text-align: center; font-size: 15px; color: #6c7a89; text-decoration: none; animation: fadeIn; animation-duration: 1.5s; } </style> </head> <body> <div class="container"> <h1>萨波2022委託与赠图表</h1> <h2>这些不代表画的顺序 会跳着画</h2> <img src="header.png" class="header" /> <li class="table-note"> 如果要一次看完整表格请切换到电脑版网页喔 </li> <ul class="responsive-table"> <li class="table-header"> <div class="col col-1">委託人姓名</div> <div class="col col-2">委託项目</div> <div class="col col-3">付款状态</div> <div class="col col-4">进度状态</div> </li> 资料载入中 </ul> <p><a href="https://www.facebook.com/Sabo9335">萨波FB</a> · <a href="https://instagram.com/sabooo_9335?igshid=YmMyMTA2M2Y=">萨波IG</a> · <a href="https://discord.gg/ve9ERWVEPR">橘子牌太空船</a><br />Made by <a href="https://github.com/Edit-Mr">EDM</a> with❤</p> </div> <script> //请把下面按这串改成刚才的网址 let requestURL = "https://script.google.com/macros/s/xxxxxxxx/exec"; let request = new XMLHttpRequest(); request.open("GET", requestURL); request.responseType = "text"; request.send(); request.onload = function () { console.log("载入成功"); $("p").addClass('animate_animated','animate_fadeOut') //动画 $(".responsive-table").html(request.response); //用表格取代.responsive-table }; </script> </body>表格资料网站
function doGet(){ var spreadsheet = SpreadsheetApp.openById('xxxxxxxxxxxxxxx'); // Sheet id var sheet = spreadsheet.getSheets()[0]; var rowLength = sheet.getLastRow(); var columnLength = sheet.getLastColumn(); var data = sheet.getRange(3,1,rowLength,columnLength).getValues(); var dataExport = ['<li class="table-header"><div class="col col-1">委託人姓名</div><div class="col col-2"++>委託项目</div><div class="col col-3">付款状态</div><div class="col col-4">进度状态</div></li>']; var stat, ed=[]; // 一个个加入json for(i in data){ if(data[i][0] != ""){ if (data[i][3]=="完成"){ ed.push('<li class="table-row"><div class="col col-1" data-label="委託人姓名">'+data[i][0]+'</div><div class="col col-2" data-label="委託项目">'+data[i][1]+'</div><div class="col col-3" data-label="付款状态">'+data[i][2]+" "+data[i][4]+'</div><div class="col col-4 finished" data-label="进度状态">'+data[i][3]+'</div></li>') }else{ dataExport.push('<li class="table-row"><div class="col col-1" data-label="委託人姓名">'+data[i][0]+'</div><div class="col col-2" data-label="委託项目">'+data[i][1]+'</div><div class="col col-3" data-label="付款状态">'+data[i][2]+" "+data[i][4]+'</div><div class="col col-4" data-label="进度状态">'+data[i][3]+'</div></li>') } }; }; dataExport=dataExport.concat(ed); // 回传JSON console.log(dataExport.join("")); return ContentService.createTextOutput(dataExport.join("")); }如果你觉得这篇文章有帮助到你欢迎在Instagram或Google新闻追蹤毛哥EM资讯密技
微信扫一扫打赏
支付宝扫一扫打赏
