回答編集履歴
3
イベントについて追記
test
CHANGED
|
@@ -221,3 +221,69 @@
|
|
|
221
221
|
*/
|
|
222
222
|
|
|
223
223
|
```
|
|
224
|
+
|
|
225
|
+
|
|
226
|
+
|
|
227
|
+
質問を閉じてしまったのね
|
|
228
|
+
|
|
229
|
+
イベントについて流してしまったのでついでに。
|
|
230
|
+
|
|
231
|
+
document.addEventListener にしているのは、対象のテーブル以外に範囲を広げているけれど
|
|
232
|
+
|
|
233
|
+
document が全て読み込まれなくてもOKだから。
|
|
234
|
+
|
|
235
|
+
そして、個々の TH 要素にイベントをくっつけるのは好くない。
|
|
236
|
+
|
|
237
|
+
やたらとくっつけたがる人が多い。
|
|
238
|
+
|
|
239
|
+
クリックされた要素から this.table の中の要素か判断する
|
|
240
|
+
|
|
241
|
+
その要素からTH 要素を取得する。
|
|
242
|
+
|
|
243
|
+
<th><labele>hoge</label></th>になっているかもしれないから。
|
|
244
|
+
|
|
245
|
+
|
|
246
|
+
|
|
247
|
+
```js
|
|
248
|
+
|
|
249
|
+
class HYOU {
|
|
250
|
+
|
|
251
|
+
constructor (table) {
|
|
252
|
+
|
|
253
|
+
this.table = table;
|
|
254
|
+
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
setData (ary) { }
|
|
258
|
+
|
|
259
|
+
setTHead () { }
|
|
260
|
+
|
|
261
|
+
|
|
262
|
+
|
|
263
|
+
handleEvent (event) {
|
|
264
|
+
|
|
265
|
+
let e = event.target;
|
|
266
|
+
|
|
267
|
+
//this.table.tHead が必ずある前提
|
|
268
|
+
|
|
269
|
+
if (8 === (e.compareDocumentPosition (this.table.tHead) & e.DOCUMENT_POSITION_CONTAINS)) {
|
|
270
|
+
|
|
271
|
+
let th = e.closest ('th');// e === th と限らない
|
|
272
|
+
|
|
273
|
+
if (th) {
|
|
274
|
+
|
|
275
|
+
console.log (th.cellIndex);
|
|
276
|
+
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
const a = new HYOU (document.querySelector('table'));
|
|
286
|
+
|
|
287
|
+
document.addEventListener ('click', a, false);
|
|
288
|
+
|
|
289
|
+
```
|
2
追記の修正
test
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
オブジェクト指向が意味をなしていないと思いました。
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
|
|
6
6
|
|
|
7
7
|
追記
|
|
8
8
|
|
1
追記
test
CHANGED
|
@@ -2,6 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
オブジェクト指向が意味をなしていないと思いました。
|
|
4
4
|
|
|
5
|
+
--
|
|
6
|
+
|
|
7
|
+
追記
|
|
8
|
+
|
|
9
|
+
document.createElement('thead');
|
|
10
|
+
|
|
11
|
+
は、複数個登録できない。事前にチェックが必要
|
|
12
|
+
|
|
13
|
+
1回しか使わないからいいのでは？と思うかもしれないけれど
|
|
14
|
+
|
|
15
|
+
それならば class で書く必要がないのでは？ といわれてしまう。
|
|
16
|
+
|
|
5
17
|
|
|
6
18
|
|
|
7
19
|
```javascript
|