teratail
回答率
85.48%
質問するログイン新規登録
トップJavaScriptに関する質問取得した値をテーブルに反映させたい

編集履歴

質問編集履歴

6

図の追加

2022/05/26 01:38

投稿

skmr
skmr

スコア2

test CHANGED
File without changes
test CHANGED
@@ -9,6 +9,8 @@
9
9
  Aに新しいテーブルを表示させることはできましたが，
10
10
  取得した値をそのテーブルに反映させる方法が分かりません。
11
11
  ネットでも色々調べたのですが解決せず，ご教示いただけるとありがたいです。
12
+
13
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-05-26/d93f16c6-e499-46e1-8df8-81593ac399b4.png)
12
14
 
13
15
  ```HTML
14
16
  <div id="notetable" class="notetable">
JavaScript

5

コードの追加

2022/05/26 01:05

投稿

skmr
skmr

スコア2

test CHANGED
File without changes
test CHANGED
@@ -64,12 +64,6 @@
64
64
 
65
65
 
66
66
  ```JavaScript
67
- window.addEventListener('load', function () {
68
- document.querySelectorAll('table td').forEach(elm => {
69
- elm.contentEditable = true;
70
- });
71
- });
72
- }
73
67
 
74
68
  let button = document.getElementById('submit');
75
69
  button.addEventListener('click', function(event2){
@@ -78,59 +72,53 @@
78
72
  });
79
73
 
80
74
  function addtable(notes) {
81
- //tableの要素を取得
82
- let tableinput = document.getElementById('table');
83
- let cells = tableinput.querySelectorAll('td');
84
- cells.forEach( (cell) => console.log(cell.innerHTML));
85
- // div要素を生成
75
+ // div要素を生成
86
76
  var note = document.createElement('div');
87
77
  const tool = document.createElement('div');
78
+ // ノートテキスト
79
+ var tablebox = document.createElement('div');
80
+ tablebox.className = 'notetable2';
81
+ //tableの要素を取得
82
+ //ノートラベル
88
- var li1 = document.createElement('div');
83
+ var li2 = document.createElement('li');
84
+ li2.innerText = element.value;
85
+ li2.className = 'notelabel1';
86
+ //タスクラベル
87
+ var li3 = document.createElement('li');
88
+ var currenttask = $('.slider').slick('slickCurrentSlide');
89
+
90
+ if (currenttask === 0) {
91
+ li3.innerText = 'Step 1: ';
92
+ note.className = 'sticky1';
93
+ tool.className = 'tool1';
94
+ }
95
+ else if (currenttask === 1) {
96
+ li3.innerText = 'Step 2: ';
97
+ note.className = 'sticky1';
98
+ tool.className = 'tool1';
99
+ }
100
+ else if (currenttask === 2) {
101
+ li3.innerText = 'Step 3: ';
102
+ note.className = 'sticky2';
103
+ tool.className = 'tool2';
104
+ }
105
+ li3.className = 'notelabel2';
106
+
107
+ //button
108
+ var button = document.createElement('p');
109
+ button.className = 'button'
89
- li1.innerHTML = `
110
+ button.innerHTML = `
90
- <table id="table2">
91
- <tbody>
92
- <tr class="labels">
93
- <th class="label" colspan="2">Variables</th>
111
+ <button class = "delete" id ="delete"><i class="fa-solid fa-trash"></i></button>
94
- <th>1</th>
95
- <th>2</th>
96
- <th>3</th>
97
- <th>4</th>
98
- <th>5</th>
99
- </tr>
100
- <tr>
101
- <th>A</th>
102
- <td></td>
103
- <td></td>
104
- <td></td>
105
- <td></td>
106
- <td></td>
107
- <td></td>
108
- </tr>
109
- <tr>
110
- <th>B</th>
111
- <td></td>
112
- <td></td>
113
- <td></td>
114
- <td></td>
115
- <td></td>
116
- <td></td>
117
- </tr>
118
- <tr>
119
- <th>C</th>
120
- <td></td>
121
- <td></td>
122
- <td></td>
123
- <td></td>
124
- <td></td>
125
- <td></td>
126
- </tr>
127
- </tbody>
128
- </table>
129
112
  `
113
+
130
- li1.setAttribute('contenteditable', true);
114
+ //
131
- note.appendChild(li1);
115
+ note.appendChild(tool);
116
+ tool.appendChild(li3);
117
+ tool.appendChild(li2);
118
+ tool.appendChild(button);
119
+ note.appendChild(tablebox);
120
+
132
121
  // 生成したdiv要素を追加する
133
122
  var top = document.getElementById('top');
134
123
  top.after(note);
135
- input.value = "";
136
124
 
JavaScript

4

コードの修正

2022/05/23 02:32

投稿

skmr
skmr

スコア2

test CHANGED
File without changes
test CHANGED
@@ -64,6 +64,13 @@
64
64
 
65
65
 
66
66
  ```JavaScript
67
+ window.addEventListener('load', function () {
68
+ document.querySelectorAll('table td').forEach(elm => {
69
+ elm.contentEditable = true;
70
+ });
71
+ });
72
+ }
73
+
67
74
  let button = document.getElementById('submit');
68
75
  button.addEventListener('click', function(event2){
69
76
  event2.preventDefault();
JavaScript

3

情報の追加

2022/05/23 02:30

投稿

skmr
skmr

スコア2

test CHANGED
File without changes
test CHANGED
@@ -10,8 +10,66 @@
10
10
  取得した値をそのテーブルに反映させる方法が分かりません。
11
11
  ネットでも色々調べたのですが解決せず，ご教示いただけるとありがたいです。
12
12
 
13
+ ```HTML
14
+ <div id="notetable" class="notetable">
15
+ <table id="table">
16
+ <tbody>
17
+ <tr class="labels">
18
+ <th class="label" colspan="2">Variables</th>
19
+ <th>1</th>
20
+ <th>2</th>
21
+ <th>3</th>
22
+ <th>4</th>
23
+ <th>5</th>
24
+ </tr>
25
+ <tr>
26
+ <th>A</th>
27
+ <td></td>
28
+ <td></td>
29
+ <td></td>
30
+ <td></td>
31
+ <td></td>
32
+ <td></td>
33
+ </tr>
34
+ <tr>
35
+ <th>B</th>
36
+ <td></td>
37
+ <td></td>
38
+ <td></td>
39
+ <td></td>
40
+ <td></td>
41
+ <td></td>
42
+ </tr>
43
+ <tr>
44
+ <th>C</th>
45
+ <td></td>
46
+ <td></td>
47
+ <td></td>
48
+ <td></td>
49
+ <td></td>
50
+ <td></td>
51
+ </tr>
52
+ </tbody>
53
+ </table>
54
+ <div class="icon">
55
+ <button id="submit" class="fas"><i class="fa-solid fa-check"></i></button>
56
+ </div>
57
+
58
+ <div class="noteview">
59
+ <div id="noteview" class="noteinner">
60
+ <p id="top"></p>
61
+ </div>
62
+ </div>
63
+ ```
64
+
13
65
 
14
66
  ```JavaScript
67
+ let button = document.getElementById('submit');
68
+ button.addEventListener('click', function(event2){
69
+ event2.preventDefault();
70
+ addtable();
71
+ });
72
+
15
73
  function addtable(notes) {
16
74
  //tableの要素を取得
17
75
  let tableinput = document.getElementById('table');
@@ -62,6 +120,7 @@
62
120
  </tbody>
63
121
  </table>
64
122
  `
123
+ li1.setAttribute('contenteditable', true);
65
124
  note.appendChild(li1);
66
125
  // 生成したdiv要素を追加する
67
126
  var top = document.getElementById('top');
JavaScript

2

誤字

2022/05/21 05:06

投稿

skmr
skmr

スコア2

test CHANGED
File without changes
test CHANGED
@@ -57,6 +57,7 @@
57
57
  <td></td>
58
58
  <td></td>
59
59
  <td></td>
60
+ <td></td>
60
61
  </tr>
61
62
  </tbody>
62
63
  </table>
JavaScript

1

誤字

2022/05/21 05:05

投稿

skmr
skmr

スコア2

test CHANGED
File without changes
test CHANGED
@@ -33,7 +33,7 @@
33
33
  <th>5</th>
34
34
  </tr>
35
35
  <tr>
36
- <th>IV</th>
36
+ <th>A</th>
37
37
  <td></td>
38
38
  <td></td>
39
39
  <td></td>
@@ -42,7 +42,7 @@
42
42
  <td></td>
43
43
  </tr>
44
44
  <tr>
45
- <th>DV</th>
45
+ <th>B</th>
46
46
  <td></td>
47
47
  <td></td>
48
48
  <td></td>
@@ -51,7 +51,7 @@
51
51
  <td></td>
52
52
  </tr>
53
53
  <tr>
54
- <th>Test points</th>
54
+ <th>C</th>
55
55
  <td></td>
56
56
  <td></td>
57
57
  <td></td>
JavaScript