回答編集履歴
3
イベントについて追記
answer
CHANGED
|
@@ -109,4 +109,37 @@
|
|
|
109
109
|
header4=new SetHead(tbl_ths4);
|
|
110
110
|
のように、使いまわしができない設計図などただの function でよい！
|
|
111
111
|
*/
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
質問を閉じてしまったのね
|
|
115
|
+
イベントについて流してしまったのでついでに。
|
|
116
|
+
document.addEventListener にしているのは、対象のテーブル以外に範囲を広げているけれど
|
|
117
|
+
document が全て読み込まれなくてもOKだから。
|
|
118
|
+
そして、個々の TH 要素にイベントをくっつけるのは好くない。
|
|
119
|
+
やたらとくっつけたがる人が多い。
|
|
120
|
+
クリックされた要素から this.table の中の要素か判断する
|
|
121
|
+
その要素からTH 要素を取得する。
|
|
122
|
+
<th><labele>hoge</label></th>になっているかもしれないから。
|
|
123
|
+
|
|
124
|
+
```js
|
|
125
|
+
class HYOU {
|
|
126
|
+
constructor (table) {
|
|
127
|
+
this.table = table;
|
|
128
|
+
}
|
|
129
|
+
setData (ary) { }
|
|
130
|
+
setTHead () { }
|
|
131
|
+
|
|
132
|
+
handleEvent (event) {
|
|
133
|
+
let e = event.target;
|
|
134
|
+
//this.table.tHead が必ずある前提
|
|
135
|
+
if (8 === (e.compareDocumentPosition (this.table.tHead) & e.DOCUMENT_POSITION_CONTAINS)) {
|
|
136
|
+
let th = e.closest ('th');// e === th と限らない
|
|
137
|
+
if (th) {
|
|
138
|
+
console.log (th.cellIndex);
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
const a = new HYOU (document.querySelector('table'));
|
|
144
|
+
document.addEventListener ('click', a, false);
|
|
112
145
|
```
|
2
追記の修正
answer
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
コメントに書き入れました。
|
|
2
2
|
オブジェクト指向が意味をなしていないと思いました。
|
|
3
|
-
|
|
3
|
+
|
|
4
4
|
追記
|
|
5
5
|
document.createElement('thead');
|
|
6
6
|
は、複数個登録できない。事前にチェックが必要
|
1
追記
answer
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
コメントに書き入れました。
|
|
2
2
|
オブジェクト指向が意味をなしていないと思いました。
|
|
3
|
+
--
|
|
4
|
+
追記
|
|
5
|
+
document.createElement('thead');
|
|
6
|
+
は、複数個登録できない。事前にチェックが必要
|
|
7
|
+
1回しか使わないからいいのでは？と思うかもしれないけれど
|
|
8
|
+
それならば class で書く必要がないのでは？ といわれてしまう。
|
|
3
9
|
|
|
4
10
|
```javascript
|
|
5
11
|
|