【JS】 入れ子になったクラスのメソッドの呼び出し方法がわかりません.
↑ 後から行を追加できるエディタをtable要素を用いて作っています.
実現したいこと
「+」ボタンが押されたら,その直下に新しく行(tr要素以下)を追加したい.
問題点
現状はTdクラスでクリックイベントの処理を記述していて,Tdクラスから新しく行を追加するTableクラスの "setNewOneLine" メソッドをどう呼び出せばいいのかがわかりません.
下記にコードの全文を記述しています.
js
1// main.js 2 3const FLOAT_SUB = (num1, num2) => Number((num1 - num2).toFixed(2)); 4 5class Table { 6 constructor(row) { 7 this.TABLE_ELEM = document.createElement('table'); 8 this.TBODY_ELEM = document.createElement('tbody'); 9 this.row = row; // 行数 10 this.tableArray = new Array(); // tbodyの中身 "tr" を保持 11 12 this._setTable(); 13 } 14 15 get table() { 16 return this.TABLE_ELEM; 17 } 18 19 _setTable() { 20 21 for(let i = 1; i <= this.row; i++) { 22 this.TBODY_ELEM.appendChild(this.createOneLine(i)); 23 } 24 25 this.TABLE_ELEM.appendChild(this.TBODY_ELEM); 26 } 27 28 createOneLine(num) { 29 let trElem = document.createElement('tr'); 30 let index = FLOAT_SUB(num, 1); 31 let th = new Th(index, num); 32 let text = new Td(index, "Text is written here.", "input"); 33 let func = new Td(index, "+", "button"); 34 trElem.appendChild(th.thElem); 35 trElem.appendChild(text.tdElem); 36 trElem.appendChild(func.tdElem); 37 38 this.tableArray[index] = trElem; 39 return trElem; 40 } 41 42 /** 43 * 新しく行を追加する 44 * @param {Number} num tableArray に新しく追加する要素番号-1 45 */ 46 setNewOneLine(num) { 47 this.tableArray[FLOAT_SUB(num, 1.1)].after(this.createOneLine(num)); 48 this.row++; 49 } 50} 51 52/** 53 * td エレメントの作成 54 * @param {Number} index TableクラスのtableArrayの要素番号 55 * @param {String} text tdの子要素のテキスト 56 * @param {String} childTag tdの子要素のタグネーム 57 * @returns 裏返すコマの座標と裏返すコマの数 58 */ 59class Td { 60 constructor(index, text, childTag) { 61 this.index = index; 62 this.tdElem = document.createElement('td'); 63 this.text = text; 64 this.childTag = childTag; 65 66 this._setTd() 67 } 68 69 _setTd() { 70 if(this.childTag == "button") { 71 this.createBtnElem(); 72 } else { 73 this.createInputElem(); 74 } 75 } 76 77 createInputElem() { // inputをtdElementの子要素として追加 78 let inputElem = document.createElement('input'); 79 inputElem.type = this.text; 80 inputElem.value = this.text; 81 this.tdElem.appendChild(inputElem); 82 } 83 createBtnElem() { // ボタンをtdElementの子要素として追加 84 let btnElem = document.createElement('button'); 85 btnElem.type = "button"; 86 btnElem.innerText = this.text; 87 88 btnElem.addEventListener('click', () => { 89 console.log("btn click."); 90 91 // ここに新しく行を追加する処理を書きたい. 92 93 }); 94 95 this.tdElem.appendChild(btnElem); 96 } 97} 98 99class Th { 100 constructor(index, text) { 101 this.index = index; 102 this.thElem = document.createElement('th'); 103 this.text = text; 104 105 this._setTh(); 106 } 107 108 _setTh() { 109 this.thElem.innerText = this.text; 110 } 111} 112 113 114window.onload = () => { 115 let table = new Table(3); 116 document.getElementById('hoge').appendChild(table.table); 117 118 table.setNewOneLine(1.1); // 1行目の+が押されたと仮定 119 table.setNewOneLine(1.2); // 1.1行目の+が押されたと仮定 120 console.log(table); 121}
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>hoge</title> 7 <script src="./js/main.js"></script> 8</head> 9<body> 10 <main role="main"> 11 <div id="hoge"> 12 </div> 13 </main> 14</body> 15</html>
質問
- Tableクラスの中で宣言されたTdクラスから,Tableクラスのメソッドを呼び出す方法について
- このクラス設計では呼び出せないのであれば,どうすれば良いか最適解を教えていただきたい
以上,よろしくお願い致します.

回答2件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。