質問編集履歴

1

コード以外の本文をコードブロックで括っていたので、外した。言語名も変更した。

2020/05/30 12:27

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,327 +1,313 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
+ 初投稿です。どうぞよろしくお願いします!!
4
+
5
+ HTMLでテーブルを表示し、マウスポインタがある行と列をハイライト(着色)させたいです。
6
+
7
+ 以下のサイトにあるjavascriptのコードを参考に実装を試みました。
8
+
9
+ https://so-zou.jp/web-app/tech/programming/javascript/dom/node/element/html/table/#no9
10
+
11
+
12
+
13
+ ### 発生している問題・エラーメッセージ
14
+
15
+ colgroupなどを設定し試みたのですが、どうしても期待通りに動作しません。
16
+
17
+ 以下、現在の状況です。
18
+
19
+ https://gyazo.com/c7bb48b3edcd485fcd9321ba0c69dc54
20
+
21
+
22
+
23
+
24
+
25
+ ### 該当のソースコード
26
+
27
+
28
+
29
+ ```haml
30
+
31
+ %table#home-table.home-table
32
+
33
+ %colgroup{:span => 5}
34
+
35
+ %tbody
36
+
37
+ %tr
38
+
39
+ %th.no{:rowspan => 2} No
40
+
41
+ %th.name{:rowspan => 2} Name
42
+
43
+ %th.pts{:rowspan => 2} PTS
44
+
45
+ %th.fg{:colspan => 3} FG
46
+
47
+ %th.twop{:colspan => 3} 2P
48
+
49
+ %th.threep{:colspan => 3} 3P
50
+
51
+ %th.ft{:colspan => 3} FT
52
+
53
+ %th.reb{:colspan => 3} REB
54
+
55
+ %th.as{:rowspan => 2} AS
56
+
57
+ %th.to{:rowspan => 2} TO
58
+
59
+ %th.st{:rowspan => 2} ST
60
+
61
+ %th.bs{:rowspan => 2} BS
62
+
63
+ %th.pf{:rowspan => 2} PF
64
+
65
+ %tr
66
+
67
+ %th.fgm M
68
+
69
+ %th.fga A
70
+
71
+ %th.fgp %
72
+
73
+ %th.twopm M
74
+
75
+ %th.twopa A
76
+
77
+ %th.twopp %
78
+
79
+ %th.threepm M
80
+
81
+ %th.threepa A
82
+
83
+ %th.threepp %
84
+
85
+ %th.ftm M
86
+
87
+ %th.fta A
88
+
89
+ %th.ftp %
90
+
91
+ %th.or OR
92
+
93
+ %th.dr DR
94
+
95
+ %th.ttlreb Total
96
+
97
+ - (1..18).each do |i|
98
+
99
+ %tr
100
+
101
+ %td.darkblue= 0
102
+
103
+ %td.darkblue 山田太郎
104
+
105
+ %td.blue= 0
106
+
107
+ %td.blue= 0
108
+
109
+ %td.blue= 0
110
+
111
+ %td.blue= 0
112
+
113
+ %td.lightblue= 0
114
+
115
+ %td.lightblue= 0
116
+
117
+ %td.blue= 0
118
+
119
+ %td.lightblue= 0
120
+
121
+ %td.lightblue= 0
122
+
123
+ %td.blue 100%
124
+
125
+ %td.lightblue= 0
126
+
127
+ %td.lightblue= 0
128
+
129
+ %td.blue= 0
130
+
131
+ %td.lightblue= 0
132
+
133
+ %td.lightblue= 0
134
+
135
+ %td.blue= 0
136
+
137
+ %td.lightblue= 0
138
+
139
+ %td.lightblue= 0
140
+
141
+ %td.lightblue= 0
142
+
143
+ %td.lightblue= 0
144
+
145
+ %td.lightblue= 0
146
+
3
147
  ```
4
148
 
149
+ ```Javascript
150
+
151
+ window.addEventListener( "DOMContentLoaded", function(){
152
+
153
+ var TARGET_CLASS = 'home-table';
154
+
155
+ var CELL_COLOR = 'gray';
156
+
157
+
158
+
159
+ var tables = document.body.getElementsByTagName( 'table' );
160
+
5
- 初投稿です。どうぞよろしくお願いします!!
161
+ console.log(tables);
6
-
162
+
7
- HTMLでテーブルを表示し、マウスポインタがある行と列をハイライト(着色)させたいです。
163
+ for( var i = 0; i < tables.length; i++ )
164
+
8
-
165
+ {
166
+
167
+ if( tables[ i ].className.indexOf( TARGET_CLASS ) != -1 )
168
+
169
+ {
170
+
171
+ AttachHighlighting( tables[ i ] );
172
+
173
+ }
174
+
175
+ }
176
+
177
+
178
+
179
+
180
+
9
- 以下のサイトにあるjavascriptのコードを参考に実装を試みました。
181
+ function AttachHighlighting( table )
182
+
10
-
183
+ {
184
+
185
+ for( var i = 0; i < table.rows.length; i++ )
186
+
187
+ {
188
+
189
+ var cells = table.rows[ i ].cells;
190
+
191
+ for( var k = 0; k < cells.length; k++ )
192
+
193
+ {
194
+
195
+ var cell = cells[ k ];
196
+
197
+ if( cell.tagName != 'th' )
198
+
199
+ {
200
+
201
+ cell.onmouseover = function()
202
+
203
+ {
204
+
205
+ var row = this.parentNode;
206
+
207
+ var table = row.parentNode.parentNode;
208
+
209
+ var cols = table.getElementsByTagName( 'col' );
210
+
211
+
212
+
213
+ for( var i = 0; i < row.cells.length; i++ )
214
+
215
+ {
216
+
217
+ cols[ i ].style.backgroundColor
218
+
219
+ = ( row.cells[ i ] == this )? CELL_COLOR : '';
220
+
221
+ }
222
+
223
+
224
+
225
+ for( var i = 0; i < table.rows.length; i++ )
226
+
227
+ {
228
+
229
+ table.rows[ i ].style.backgroundColor
230
+
231
+ = ( table.rows[ i ] == row )? CELL_COLOR : '';
232
+
233
+ }
234
+
235
+ }
236
+
237
+ }
238
+
239
+ }
240
+
241
+ }
242
+
243
+
244
+
11
- https://so-zou.jp/web-app/tech/programming/javascript/dom/node/element/html/table/#no9
245
+ var colgroups = table.getElementsByTagName( 'colgroup' );
246
+
247
+ for( var i = 0; i < colgroups.length; i++ )
248
+
249
+ {
250
+
251
+ var colgroup = colgroups[ i ];
252
+
253
+ var cols = colgroup.getElementsByTagName( 'col' );
254
+
255
+
256
+
257
+ for( var k = cols.length; k < colgroup.span; k++ )
258
+
259
+ {
260
+
261
+ var col = document.createElement( 'col' );
262
+
263
+ colgroup.appendChild( col );
264
+
265
+ }
266
+
267
+ }
268
+
269
+
270
+
271
+ table.onmouseout = function()
272
+
273
+ {
274
+
275
+ var cols = this.getElementsByTagName( 'col' );
276
+
277
+ for( var i = 0; i < cols.length; i++ )
278
+
279
+ {
280
+
281
+ cols[ i ].style.backgroundColor = '';
282
+
283
+ }
284
+
285
+
286
+
287
+ for( var i = 0; i < this.rows.length; i++ )
288
+
289
+ {
290
+
291
+ this.rows[ i ].style.backgroundColor = '';
292
+
293
+ }
294
+
295
+ }
296
+
297
+ }
298
+
299
+
300
+
301
+ }, false );
302
+
303
+
12
304
 
13
305
  ```
14
306
 
15
307
 
16
308
 
17
- ### 発生している問題・エラーメッセージ
18
-
19
- ```
20
-
21
- colgroupなどを設定し試みたのですが、どうしても期待通りに動作しません。
22
-
23
- 以下、現在の状況です。
24
-
25
- https://gyazo.com/c7bb48b3edcd485fcd9321ba0c69dc54
26
-
27
- ```
28
-
29
-
30
-
31
-
32
-
33
- ### 該当のソースコード
34
-
35
-
36
-
37
- ```HTML
38
-
39
- (hamlで書いてます)
40
-
41
- %table#home-table.home-table
42
-
43
- %colgroup{:span => 5}
44
-
45
- %tbody
46
-
47
- %tr
48
-
49
- %th.no{:rowspan => 2} No
50
-
51
- %th.name{:rowspan => 2} Name
52
-
53
- %th.pts{:rowspan => 2} PTS
54
-
55
- %th.fg{:colspan => 3} FG
56
-
57
- %th.twop{:colspan => 3} 2P
58
-
59
- %th.threep{:colspan => 3} 3P
60
-
61
- %th.ft{:colspan => 3} FT
62
-
63
- %th.reb{:colspan => 3} REB
64
-
65
- %th.as{:rowspan => 2} AS
66
-
67
- %th.to{:rowspan => 2} TO
68
-
69
- %th.st{:rowspan => 2} ST
70
-
71
- %th.bs{:rowspan => 2} BS
72
-
73
- %th.pf{:rowspan => 2} PF
74
-
75
- %tr
76
-
77
- %th.fgm M
78
-
79
- %th.fga A
80
-
81
- %th.fgp %
82
-
83
- %th.twopm M
84
-
85
- %th.twopa A
86
-
87
- %th.twopp %
88
-
89
- %th.threepm M
90
-
91
- %th.threepa A
92
-
93
- %th.threepp %
94
-
95
- %th.ftm M
96
-
97
- %th.fta A
98
-
99
- %th.ftp %
100
-
101
- %th.or OR
102
-
103
- %th.dr DR
104
-
105
- %th.ttlreb Total
106
-
107
- - (1..18).each do |i|
108
-
109
- %tr
110
-
111
- %td.darkblue= 0
112
-
113
- %td.darkblue 山田太郎
114
-
115
- %td.blue= 0
116
-
117
- %td.blue= 0
118
-
119
- %td.blue= 0
120
-
121
- %td.blue= 0
122
-
123
- %td.lightblue= 0
124
-
125
- %td.lightblue= 0
126
-
127
- %td.blue= 0
128
-
129
- %td.lightblue= 0
130
-
131
- %td.lightblue= 0
132
-
133
- %td.blue 100%
134
-
135
- %td.lightblue= 0
136
-
137
- %td.lightblue= 0
138
-
139
- %td.blue= 0
140
-
141
- %td.lightblue= 0
142
-
143
- %td.lightblue= 0
144
-
145
- %td.blue= 0
146
-
147
- %td.lightblue= 0
148
-
149
- %td.lightblue= 0
150
-
151
- %td.lightblue= 0
152
-
153
- %td.lightblue= 0
154
-
155
- %td.lightblue= 0
156
-
157
- ```
158
-
159
- ```Javascript
160
-
161
- window.addEventListener( "DOMContentLoaded", function(){
162
-
163
- var TARGET_CLASS = 'home-table';
164
-
165
- var CELL_COLOR = 'gray';
166
-
167
-
168
-
169
- var tables = document.body.getElementsByTagName( 'table' );
170
-
171
- console.log(tables);
172
-
173
- for( var i = 0; i < tables.length; i++ )
174
-
175
- {
176
-
177
- if( tables[ i ].className.indexOf( TARGET_CLASS ) != -1 )
178
-
179
- {
180
-
181
- AttachHighlighting( tables[ i ] );
182
-
183
- }
184
-
185
- }
186
-
187
-
188
-
189
-
190
-
191
- function AttachHighlighting( table )
192
-
193
- {
194
-
195
- for( var i = 0; i < table.rows.length; i++ )
196
-
197
- {
198
-
199
- var cells = table.rows[ i ].cells;
200
-
201
- for( var k = 0; k < cells.length; k++ )
202
-
203
- {
204
-
205
- var cell = cells[ k ];
206
-
207
- if( cell.tagName != 'th' )
208
-
209
- {
210
-
211
- cell.onmouseover = function()
212
-
213
- {
214
-
215
- var row = this.parentNode;
216
-
217
- var table = row.parentNode.parentNode;
218
-
219
- var cols = table.getElementsByTagName( 'col' );
220
-
221
-
222
-
223
- for( var i = 0; i < row.cells.length; i++ )
224
-
225
- {
226
-
227
- cols[ i ].style.backgroundColor
228
-
229
- = ( row.cells[ i ] == this )? CELL_COLOR : '';
230
-
231
- }
232
-
233
-
234
-
235
- for( var i = 0; i < table.rows.length; i++ )
236
-
237
- {
238
-
239
- table.rows[ i ].style.backgroundColor
240
-
241
- = ( table.rows[ i ] == row )? CELL_COLOR : '';
242
-
243
- }
244
-
245
- }
246
-
247
- }
248
-
249
- }
250
-
251
- }
252
-
253
-
254
-
255
- var colgroups = table.getElementsByTagName( 'colgroup' );
256
-
257
- for( var i = 0; i < colgroups.length; i++ )
258
-
259
- {
260
-
261
- var colgroup = colgroups[ i ];
262
-
263
- var cols = colgroup.getElementsByTagName( 'col' );
264
-
265
-
266
-
267
- for( var k = cols.length; k < colgroup.span; k++ )
268
-
269
- {
270
-
271
- var col = document.createElement( 'col' );
272
-
273
- colgroup.appendChild( col );
274
-
275
- }
276
-
277
- }
278
-
279
-
280
-
281
- table.onmouseout = function()
282
-
283
- {
284
-
285
- var cols = this.getElementsByTagName( 'col' );
286
-
287
- for( var i = 0; i < cols.length; i++ )
288
-
289
- {
290
-
291
- cols[ i ].style.backgroundColor = '';
292
-
293
- }
294
-
295
-
296
-
297
- for( var i = 0; i < this.rows.length; i++ )
298
-
299
- {
300
-
301
- this.rows[ i ].style.backgroundColor = '';
302
-
303
- }
304
-
305
- }
306
-
307
- }
308
-
309
-
310
-
311
- }, false );
312
-
313
-
314
-
315
- ```
316
-
317
-
318
-
319
309
  ### メッセージ
320
310
 
321
- ```
322
-
323
311
  非常に初歩的なところだと思いますが、何時間もつまづいてしまいました。
324
312
 
325
313
  どなたかもしよければお願いします!
326
-
327
- ```