質問編集履歴
2
20201113の部分から下を追記しました。htmlのソースコード等も一部変更しています。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# 前提・やりたいこと
|
|
2
2
|
google スプレッドシートに出力しているデータを用いてwebページ上に動的な表を作りたいと考えています。下に現在作成中の画面を提示いたします。
|
|
3
3
|
|
|
4
|
-
|
|
5
5
|
|
|
6
6
|
また、データソースとしているスプレッドシートは下の画像です。
|
|
7
7
|
この画像のA32要素を記載したページの太郎/ここにスプシの~の部分に反映をさせたいと考えています。なお、A32要素はGASのdoGet関数でwebアプリとしてデプロイしている状態です。
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
～～略～～
|
|
44
44
|
</header>
|
|
45
45
|
<div class="main-wrapper">
|
|
46
|
-
<h1 id="target">テスト(target)</h1>
|
|
46
|
+
<h1 id="target">テスト(id="target")</h1>
|
|
47
47
|
<h1 class="section-title">患者データ</h1>
|
|
48
48
|
|
|
49
49
|
<table id="student-table">
|
|
@@ -57,22 +57,22 @@
|
|
|
57
57
|
<tbody>
|
|
58
58
|
<tr>
|
|
59
59
|
<td>太郎</td>
|
|
60
|
-
<td id="dt">ここにスプレッドシートの
|
|
60
|
+
<td id="dt">ここにスプレッドシートの値を挿入したい</td>
|
|
61
61
|
<td>in</td>
|
|
62
62
|
</tr>
|
|
63
63
|
<tr>
|
|
64
64
|
<td>次郎</td>
|
|
65
|
-
<td>
|
|
65
|
+
<td></td>
|
|
66
66
|
<td>out</td>
|
|
67
67
|
</tr>
|
|
68
68
|
<tr>
|
|
69
69
|
<td>三郎</td>
|
|
70
|
-
<td>
|
|
70
|
+
<td></td>
|
|
71
71
|
<td>in</td>
|
|
72
72
|
</tr>
|
|
73
73
|
</tbody>
|
|
74
74
|
</table>
|
|
75
|
-
|
|
75
|
+
|
|
76
76
|
<script src="table.js"></script>
|
|
77
77
|
<script type="text/javascript">
|
|
78
78
|
var table = new Tabulator("#student-table", {
|
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
.then(text => {
|
|
107
107
|
console.log(text);
|
|
108
108
|
//dtをtargetにした場合は成功(テスト(target)が10月06日_17:08に書き換わった)
|
|
109
|
-
document.getElementById('
|
|
109
|
+
document.getElementById('渡したい場所のid').textContent = text;
|
|
110
110
|
});
|
|
111
111
|
|
|
112
112
|
```
|
|
@@ -141,4 +141,40 @@
|
|
|
141
141
|
Tabulatorではこういったことはできないのかと考え色々と調べてはいますが、同様のことをしている方がほとんどおらず解決できませんでした。
|
|
142
142
|
|
|
143
143
|
どう改良すれば狙い通りに動いてくれるかご教示願いたいと思います。こういうことじゃないか、という推測だけでも大変助かります。
|
|
144
|
-
初学者であるため拙い状況説明ですがどうぞよろしくお願いいたします。
|
|
144
|
+
初学者であるため拙い状況説明ですがどうぞよろしくお願いいたします。
|
|
145
|
+
|
|
146
|
+
#(追記20201113)渡したidのパターンごとの結果
|
|
147
|
+
ご指摘を受け以下を追記します。画像ばかりで長くなりますがご了承ください。
|
|
148
|
+
上から2つのパターンにおけるhtmlの書き換えはなく、table.jsのgetElementByIdの引数のみを変更しています。
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
**scriptのgetElementById("target")の場合**
|
|
152
|
+
この場合は想定通りの動作をします。コンソールにエラーもありません。
|
|
153
|
+
|
|
154
|
+
|
|
155
|
+
**scriptのgetElementById("dt")の場合**
|
|
156
|
+
下の画像の通りここに～の部分が変化しておらずコンソールにも同様のエラーが出ています。
|
|
157
|
+
|
|
158
|
+
|
|
159
|
+
**htmlのtable内外にstatusという同じidを2つつけ、それを引数として渡した場合**
|
|
160
|
+
この場合はtable外部のidにのみ値が反映されていて、コンソール上にエラーもありませんでした。
|
|
161
|
+
```html
|
|
162
|
+
<div class="main-wrapper">
|
|
163
|
+
<h1 id="target">テスト(id="target")</h1>
|
|
164
|
+
<h1 class="section-title">患者データ</h1>
|
|
165
|
+
<h1 id="status"></h1> //ここと
|
|
166
|
+
<table id="student-table">
|
|
167
|
+
<thead>
|
|
168
|
+
<tr>
|
|
169
|
+
<th>氏名</th>
|
|
170
|
+
<th>最終更新日時</th>
|
|
171
|
+
<th id="status">ステータス</th> //ここ
|
|
172
|
+
</tr>
|
|
173
|
+
</thead>
|
|
174
|
+
<tbody>
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
以上のことから、スコープの問題？と考えますが全く解決に至りません...。
|
|
180
|
+
ご意見お願いいたします。
|
1
追記部分を足しました。また、ソースコードでご指摘いただいた部分を一部修正しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -10,9 +10,18 @@
|
|
|
10
10
|
スプレッドシートの値を外部のhtmlファイルに直接渡す方法は無いと聞いたためアプリとしてデプロイしています。デプロイ後に渡されるurlにアクセスすることで次の結果が得られました。
|
|
11
11
|
|
|
12
12
|
|
|
13
|
-
#
|
|
13
|
+
#(追記)問題・エラーメッセージ
|
|
14
|
+
エラーは下の通り出ました。表上のここに～の部分をid="dt"で指定するとこの結果が返って狙った処理ができません。しかし、テスト(target)の部分をid="target"で指定するとしたの画像のように出るため、tdタグに対する指定の方法を考えています。
|
|
15
|
+
```
|
|
16
|
+
Uncaught (in promise) TypeError: Cannot set property 'textContent' of null
|
|
17
|
+
at table.js:8
|
|
18
|
+
```
|
|
19
|
+
|
|
14
20
|
|
|
15
21
|
|
|
22
|
+
#ソースコード
|
|
23
|
+
|
|
24
|
+
|
|
16
25
|
```html
|
|
17
26
|
<!DOCTYPE html>
|
|
18
27
|
<html>
|
|
@@ -53,12 +62,12 @@
|
|
|
53
62
|
</tr>
|
|
54
63
|
<tr>
|
|
55
64
|
<td>次郎</td>
|
|
56
|
-
<td
|
|
65
|
+
<td>ここにスプレッドシートのデータを挿入したい</td>
|
|
57
66
|
<td>out</td>
|
|
58
67
|
</tr>
|
|
59
68
|
<tr>
|
|
60
69
|
<td>三郎</td>
|
|
61
|
-
<td
|
|
70
|
+
<td>ここにスプレッドシートのデータを挿入したい</td>
|
|
62
71
|
<td>in</td>
|
|
63
72
|
</tr>
|
|
64
73
|
</tbody>
|
|
@@ -121,12 +130,9 @@
|
|
|
121
130
|
}
|
|
122
131
|
```
|
|
123
132
|
|
|
124
|
-
```
|
|
125
|
-
Uncaught (in promise) TypeError: Cannot set property 'textContent' of null
|
|
126
|
-
at table.js:8
|
|
127
|
-
```
|
|
128
133
|
|
|
134
|
+
|
|
129
|
-
上から、html、javascript、GASのコード
|
|
135
|
+
上から、html、javascript、GASのコードです。一部省略しています。
|
|
130
136
|
main-wrapper内のtargetというidはテーブル外部であればデータを参照することができるかと考えたときのテストです。コメントにもありますがその場合は参照ができていました。
|
|
131
137
|
エラメのtable.jsというのは上記のjavascriptです。
|
|
132
138
|
|