GASで動的テーブルを表示させたい

お世話になっております。当方プログラミング初心者ながらシステム課に配属され、手探りで社内サイトを作成しています。

【やりたいこと】
スプレッドシートの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

bochan2

2019/02/25 08:05

クライアントサイドにjavascriptを使う場合は、埋め込みサーバーサイドスクリプト（<?）はサーバーサイドとクライアントサイドがごちゃ混ぜになって沼にはまるのでやめてajaxを使った方が良いと思います。

yamadaman_q

2019/02/26 05:37

せっかくアドバイス頂いてもやはり基礎知識がないとだめですね。ajaxをいろいろ調べていますがどうgasやテーブルと結びつけていいかなかなか理解で難しいところです。あきらめずに考え続けたいと思います。どうもありがとうございます。

行動規範の内容に同意します

回答2件

あくまでヒントという位置付けで。

index.html

html
1<!DOCTYPE html>
2<html>
3<head>
4<base target="_top">
5
6</head>
7<body>
8<script>
9// 表の動的作成
10// https://algorithm.joho.info/programming/javascript/table-array-2d-js/
11function makeTable(data){
12  var tableId = "divtable";
13  data = JSON.parse(data);
14// 表の作成開始
15    var rows=[];
16    var table = document.createElement("table");
17
18    // 表に2次元配列の要素を格納
19    for(i = 0; i < data.length; i++){
20        rows.push(table.insertRow(-1));  // 行の追加
21        for(j = 0; j < data[0].length; j++){
22            cell=rows[i].insertCell(-1);
23            cell.appendChild(document.createTextNode(data[i][j]));
24            // 背景色の設定
25            if(i==0){
26                cell.style.backgroundColor = "#bbb"; // ヘッダ行
27            }else{
28                cell.style.backgroundColor = "#ddd"; // ヘッダ行以外
29            }
30        }
31    }
32    // 指定したdiv要素に表を加える
33    document.getElementById(tableId).appendChild(table);
34}
35</script>
36
37<h1>SQL 2</h1>
38<form name="f1" method="post" onsubmit="return false;">
39<select id='dept' onChange="google.script.run.withSuccessHandler(makeTable).selectDept(this.value);">
40<option value='A'>A</option>
41<option value='B'>B</option>
42</select>
43</form>
44<br/>
45<br/>
46<br/>
47<div id="divtable" />
48</body>
49</html>

コード.gs

javascript
1function doGet() {
2  var output=HtmlService.createTemplateFromFile('index');
3  return output.evaluate().setTitle('回答状況');
4}
5
6function selectDept(name) {
7  return JSON.stringify(SpreadsheetApp.openById('しーとのid').getSheetByName("しーとのなまえ").getDataRange().getValues().filter(function(e) { return e[0] === name;}));
8}
9