お世話になっております。当方プログラミング初心者ながらシステム課に配属され、手探りで社内サイトを作成しています。
【やりたいこと】
スプレッドシートのA列からC列まで、(名前)(部署)(課題提出状況)というデータが全社員分約300行データが入っています。
名前 | 部署 | 課題提出状況 |
---|---|---|
テスト太郎 | 総務課 | 提出済み |
上記のようなイメージです。
これをHTMLのセレクトボックスに部署を入れ、表示ボタンを押すとその部署の状況のみが表示される動的テーブルのページを作ろうと思っていますが、自分の知識が足りず前に進まなくて困っています。
下記コードは全然できていませんが、一応記載しておきます。
わからない点は
そもそも表示ボタンを押したときにセレクトボックスの値はhtmlでとってみたが、この値をgsコードの方にもっていって条件抽出するということかなと思っているが、この値をどうやってgsにひっぱればいいかわからないという点です。この比較の方法さえわかれば、あとはfilterで配列に入れて、htmlのタグに入れていくのかなとイメージは沸いているんですが。
すいません素人すぎてわからないところの説明も下手すぎますが、ヒントだけでも得られればと思い、ダメ元で投稿しました。
もしもこのサイトの意に沿わないような質問であれば、ご指摘ください。投稿を削除いたします。
cord.js
1function doGet() { 2 var htmlOutput = HtmlService.createTemplateFromFile("index").evaluate(); 3 return htmlOutput; 4} 5 6 7function getData(){ 8 9 //スプレッドシートの取得 10 var ssid = '***************'; 11 var ss = SpreadsheetApp.openById(ssid); 12 var sheetName = 'mst'; 13 14 15 //データの取得 16 var values = ss.getSheetByName(sheetName).getDataRange().getValues(); 17 Logger.log(values); 18 19 return values; 20} 21
index.html
1<!DOCTYPE html> 2<html> 3 <head> 4 <base target="_top"> 5 <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?> 6 <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 7 </head> 8 <body> 9 <h1 >部署を選択してください</h1> 10 <select id="select1"> 11 <option value="1-2F">1-2F</option> 12 <option value="1-3F">1-3F</option> 13 <option value="1-4F">1-4F</option> 14 </select> 15 <br><br> 16 <input type="button" onclick="getData()" id="bt" value="ボタン"> 17 18 <!--データの取得スクリプト--> 19 <script> 20 //getElementByIdでHTML内の要素のIDを指定するとその要素に対しての動作を指定できる 21 //ここでは"bt"のIDがついているボタンをクリックしたら関数"get_select1"が実行される 22 document.getElementById("bt").onclick = get_select1; 23 24 function get_select1() { 25 //getElementByIdでHTML要素select1のIDの中身を取得 26 var select1 = document.getElementById("select1"); 27 //選択されている要素は何番目か取得 28 var index = select1.selectedIndex; 29 //選択されている要素を格納 30 var value = select1[index].value; 31 32 //alert(value); 33 return value; 34 } 35 36 <? 37 var data = getData(); 38 ?> 39 40 </script> 41 42 43 <!--表示部分のテーブル--> 44 <table class="table table-striped"> 45 <thead> 46 <tr> 47 <th><?= data[0][0] ?></th> 48 <th><?= data[0][1] ?></th> 49 <th><?= data[0][2] ?></th> 50 </tr> 51 </thead> 52 <tbody> 53 <? 54 for(var i = 1, l = data.length; i < l; i++) { 55 output.append('<tr>'); 56 output.append('<td>' + data[i][0] + '</td>'); 57 output.append('<td>' + data[i][1] + '</td>'); 58 output.append('<td>' + data[i][2] + '</td>'); 59 output.append('</tr>'); 60 } 61 ?> 62 </tbody> 63 </table> 64 </body> 65</html> 66
回答2件
あなたの回答
tips
プレビュー