GASのHTMLについて

GASでWebアプリの勉強をしています。

以下サイトの通りにＷｅｂアプリを作ってみたら、スプレッドシートの値を増やしてみたらスクロールの動きが変でした。
ヘッダーは上で固定し、table内でスプレッドシートの全データを表示させ、スクロールしたいのですが、できませんでした。

https://note.com/consul_addtag/n/nd581fe122540

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5  </head>
6  <body>
7  <style>
8  #header-fixed{
9	border: 5px solid #fff;    /* 表示領域を白枠で囲う */
10    position: fixed;            /* ヘッダーの固定 */
11    padding:10px 0 20px;       /* 上10px、下20pxをあける */
12    top:  0px;                   /* 位置(上0px) */
13    left: 10px;                  /* 位置(右0px) */
14    width: 100%;                /* 横幅100%　*/
15    height:70px;                /* 縦幅70px */
16    background-color:#FFF      /* バックの色 */
17  }
18  #content{
19    top:  80px;                   /* 位置(上0px) */
20    left: 0px;                  /* 位置(右0px) */
21    padding:110px 0 0px;
22    width: 100%;                /* 横幅100%　*/
23    background-color: "#000000" /* バックの色 */
24  }
25  #menu{
26    font-size : 20px;
27    border : 1px;
28    padding : 10px 20px 0px 0px;
29  }
30  thead {
31    display: block;
32  }
33  tbody {
34    overflow-x: hidden;
35    overflow-y: scroll;
36  }
37</style>
38<?
39  url = "https://script.google.com/macros/s//exec";
40?>
41  <div id='header-fixed'>
42    <font size="5pt" color="#5555ff">社員管理システム　　</font>
43    <a id='menu' href="<?=url?>/exec?name=view">再表示</a>
44    <a id='menu' href="<?=url?>/exec?name=inputStuff">社員登録</a>    
45<!--    <font size='5px'>　只今の時刻<span id="clock_time"></span>です。</font> -->
46  </div>
47<!-- ↑↑↑メニュー↑↑↑-->
48<script>
49function clock()
50{
51    // 現在日時を表すインスタンスを取得
52//    var now = new Date();
53//    document.getElementById("clock_time").innerHTML = now;
54}
55setInterval(clock, 1000);
56</script>
57      <?
58        myMail = Session.getActiveUser().getEmail();
59        output.append('<font size="2px" color="#5555ff">ログインユーザー：');
60        output.append( myMail);
61      ?>
62  <div id='content'>
63      <?
64        //スタッフリストのスプレッドIDを指定
65　　     var id ="";
66    　　 var mySheet = SpreadsheetApp.openById(id).getSheetByName("");
67        var endrow = mySheet.getLastRow();
68        var headData = mySheet.getRange("A1:N1").getValues();
69        var myData = mySheet.getRange(2, 1 , endrow-1 , 14).getValues();
70        output.append('<table border="1" cellspacing="0" cellpadding="5" bordercolor="#333333" style="table-layout:fixed;width:100%;">');
71        output.append('<thead><div fixed>');
72        output.append('<colgroup>');
73        output.append('<col style="width:3%;"><col style="width:7%;"><col><col><col><col><col><col style="width:20%;"><col style="width:10%;"><col><col style="width:10%;"><col style="width:15%;"><col style="width:5%;"><col>');
74        output.append('</colgroup>');
75        output.append('<tr>');
76        headprefix = '<th bgcolor="#5555ff"><font color="#FFFFFF" size="2px">';
77        headbackfix = '</font></th>';
78        
79        //ヘッダー情報取得
80        no = headData[0][0];
81        name = headData[0][1];
82        commit = headData[0][2];
83        company = headData[0][3];
84        payroll = headData[0][4];
85        roll = headData[0][5];
86        post = headData[0][6];
87        profile = headData[0][7];
88        tag = headData[0][8];
89        avalable = headData[0][9];
90        address = headData[0][10];
91        facebook = headData[0][11];
92        ndadate = headData[0][12];
93        status = headData[0][13];
94        
95        //テーブルヘッダー作成
96        output.append(headprefix + no + headbackfix);
97        output.append(headprefix + name + headbackfix);
98        output.append(headprefix + commit + headbackfix);
99        output.append(headprefix + company + headbackfix);
100        output.append(headprefix + payroll + headbackfix);
101        output.append(headprefix + roll + headbackfix);
102        output.append(headprefix + post + headbackfix);
103        output.append(headprefix + profile + headbackfix);
104        output.append(headprefix + tag + headbackfix);
105        output.append(headprefix + avalable + headbackfix);
106        output.append(headprefix + address + headbackfix);
107        output.append(headprefix + facebook + headbackfix);
108        output.append(headprefix + ndadate + headbackfix);
109        output.append(headprefix + status + headbackfix);
110        output.append('</tr>');
111        output.append('</thead></div>');
112        
113        //テーブルボディの作成
114        output.append('<tbody>');
115        y=0;
116        for(var i=0; i<myData.length; i++){
117          no = myData[i][y];
118          name = myData[i][y+1];
119          commit = myData[i][y+2];
120          company = myData[i][y+3];
121          payroll = myData[i][y+4];
122          roll = myData[i][y+5];
123          post = myData[i][y+6];
124          profile = myData[i][y+7];
125          tag = myData[i][y+8];
126          avalable = myData[i][y+9];
127          address = myData[i][y+10];
128          facebook = myData[i][y+11];
129          ndadate = myData[i][y+12];
130          status = myData[i][y+13];
131          
132　　　　　　headprefix = '<td style="word-wrap:break-word;"><font color="#000000" size="1px">';
133          headbackfix = '</font></td>';
134          
135          if (status === "解約" || status === "退職"){
136            output.append('<tr bgcolor = "#333333">');
137          }else if(status === "停止中"){
138            output.append('<tr bgcolor = "#AAAAAA">');
139          }else{
140            output.append('<tr bgcolor = "#FFFFFF">');
141          }
142          output.append(headprefix + no + headbackfix);
143          output.append(headprefix + getModifyUrl(no,name) + headbackfix);
144          output.append(headprefix + commit + headbackfix);
145          output.append(headprefix + company + headbackfix);
146          output.append(headprefix + payroll + headbackfix);
147          output.append(headprefix + roll + headbackfix);
148          output.append(headprefix + post + headbackfix);
149          output.append(headprefix + getLink(profile) + headbackfix);
150          output.append(headprefix + tag + headbackfix);
151          output.append(headprefix + avalable + headbackfix);
152          output.append(headprefix + getMailAddress(address) + headbackfix);
153          output.append(headprefix + getLink(facebook) + headbackfix);
154          output.append(headprefix + getViewDate(ndadate) + headbackfix);
155          output.append(headprefix + status + headbackfix);
156          output.append('</tr>');
157        }
158        output.append('</tbody>');
159        output.append('</table>');
160      ?>
161      <?
162        //上記から参照する関数群
163        function escape_html (string) {
164          if(typeof string !== 'string') {
165            return string;
166          }
167          return string.replace(/[&'`"<>]/g, function(match) {
168          return {
169          '&': '&amp;',
170          "'": '&#x27;',
171          '`': '&#x60;',
172          '"': '&quot;',
173          '<': '&lt;',
174          '>': '&gt;',
175          }[match]
176          });
177        }
178
179        //修正画面リンクを埋め込む関数
180        function getModifyUrl (no, name) {
181          var modifyUrl = url + "/exec?name=modify&no=" + no;
182          return '<a href="' + modifyUrl + '" target="_top">' + name + '</a>';
183        };
184
185　　　　　//URLリンクを埋め込む関数
186        function getLink (stringUrl) {
187          var pattern = 'http';
188          if(stringUrl.indexOf(pattern) === 0){
189            return '<a href="' + stringUrl + '" target="_blank">' + stringUrl + '</a>';
190          }else{
191            return stringUrl;
192          }
193        };
194
195        //メールリンクを埋め込む関数
196        function getMailAddress (stringMail) {
197          if(stringMail.indexOf('@') != -1){
198            return '<a href="mailto:' + stringMail + '">' + stringMail + '</a>';
199          }else{
200            return stringMail;
201          }
202        };
203
204  ?>
205    </div>
206</body>
207</html>

HTMLはあんまり書いたことがないので、このような時にうまく修正できないんです。

どなたか教えていただけますか？

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

回答2件

ベストアンサー

調整の余地はありますが、現状のコードから大幅な変更なしにテーブルのヘッダ列を固定するなら、
下記のような感じでできると思います。
（なお、IE系では正常に動かないと思います）

index.html の <style>タグ内に以下を追加します。

css
1
2  #scroll-block {
3    overflow: scroll;
4    width: calc(100vw - 1rem);
5    height: 80vh;
6  }
7
8  table tbody tr:first-child th {
9    position: sticky;
10    top: 0;
11    z-index: 1;
12  }

index.html の下記の位置に <div id="scroll-block"> と</div>を挿入するコードを追加します。

diff
1（略）
2  <div id='content'>
3      <?
4        //スタッフリストのスプレッドIDを指定
5        var id = [スプレッドシートのID];
6        var mySheet = SpreadsheetApp.openById(id).getSheetByName([シート名]);
7        var endrow = mySheet.getLastRow();
8        var headData = mySheet.getRange("A1:N1").getValues();
9        var myData = mySheet.getRange(2, 1 , endrow-1 , 14).getValues();
10+       output.append('<div id="scroll-block">')
11        output.append('<table border="1" cellspacing="0" cellpadding="5" bordercolor="#333333" style="table-layout:fixed;width:100%;">');
12        output.append('<thead><div fixed>');
13
14...
15...
16（略）
17...
18...
19...
20...
21          output.append(headprefix + getLink(facebook) + headbackfix);
22          output.append(headprefix + getViewDate(ndadate) + headbackfix);
23          output.append(headprefix + status + headbackfix);
24          output.append('</tr>');
25        }
26        output.append('</tbody>');
27        output.append('</table>');
28+       output.append('</div>');
29      ?>

投稿2021/08/13 02:05

編集2021/08/13 02:13

退会済みユーザー

総合スコア0

例えば、普通なら横に「0」メールアドレスなら「1」リンクなら「2」を右に等入れ、
「for」文で全てを確認して
「if(スプレッドシートに上の数字を入れた場所 = 「0,1,2」)」をいれ、もし、「１」
ならメールアドレスの埋め込み、「２」ならリンクの埋め込みをして、
それをvarで変数に入れて、「<br>」を変数に追加して、
この変数を表示という感じでどうでしょうか？

投稿2021/08/12 10:46