質問編集履歴

1

コードを変更しました。

2021/06/28 04:13

投稿

umi3
umi3

スコア18

test CHANGED
File without changes
test CHANGED
@@ -26,10 +26,152 @@
26
26
 
27
27
 
28
28
 
29
-
29
+ ```HTML
30
+
31
+ <!DOCTYPE html>
32
+
33
+ <html>
34
+
35
+ <head>
36
+
37
+ <meta carset="UTF-8">
38
+
39
+ <title>ToDoリスト</title>
40
+
41
+ <link rel="stylesheet" href="style.css">
42
+
43
+ </head>
44
+
45
+ <body>
46
+
47
+
48
+
49
+ <h1>ToDoリスト</h1>
50
+
51
+
52
+
53
+ <div class="form-box">
54
+
55
+ <table class="form">
56
+
57
+ <tr>
58
+
59
+ <th>予定</th>
60
+
61
+ <td><input id="todo" type="text" placeholder="予定を入力" value="予定"></td>
62
+
63
+ <th>日時</th>
64
+
65
+ <td><input id="date" type="datetime-local"></td>
66
+
67
+ </tr>
68
+
69
+ <tr>
70
+
71
+ <th>お金</th>
72
+
73
+ <td><input id="price" type="text" placeholder="金額を入力" value="10000"></td>
74
+
75
+ <th>期日</th>
76
+
77
+ <td><input id="duedate" type="datetime-local"></td>
78
+
79
+ </tr>
80
+
81
+ <tr>
82
+
83
+ <th>持ち物</th>
84
+
85
+ <td><input id="item" type="text" value="持ち物"></td>
86
+
87
+ <th>メモ</th>
88
+
89
+ <td><input id="memo" type="text" value="めもです"></td>
90
+
91
+ </tr>
92
+
93
+ </table>
94
+
95
+ <div id="addButton"><button type="submit">登録する</button></div>
96
+
97
+ <div id="clearButton"><button type="submit" onclick="deleteCheck()" >選択削除</button></div>
98
+
99
+ <div id="allclearButton"><button type="submit" onclick="deleteAll()">すべて削除</button></div>
100
+
101
+ </div>
102
+
103
+
104
+
105
+ <table class="main-table" id="table">
106
+
107
+ <tr id="table-header">
108
+
109
+ <th class="header-check"></th>
110
+
111
+ <th class="header-id">ID</th>
112
+
113
+ <th class="header-todo">予定</th>
114
+
115
+ <th class="header-date">日時</th>
116
+
117
+ <th class="header-price">お金</th>
118
+
119
+ <th class="header-duedate">期日</th>
120
+
121
+ <th class="header-item">持ち物</th>
122
+
123
+ <th class="header-memo">メモ</th>
124
+
125
+ <th class="header-check"></th>
126
+
127
+ </tr>
128
+
129
+ </table>
130
+
131
+
132
+
133
+ <script src="app.js"></script>
134
+
135
+ </body>
136
+
137
+ </html>
138
+
139
+
140
+
141
+ ```
30
142
 
31
143
  ```JavaScript
32
144
 
145
+ var j = 1;
146
+
147
+ document.getElementById("addButton").onclick = function(){
148
+
149
+ const todo =document.getElementById('todo').value//予定
150
+
151
+ const date =document.getElementById('date').value//日時
152
+
153
+ const price =document.getElementById('price').value//お金
154
+
155
+ const duedate =document.getElementById('duedate').value//期日
156
+
157
+ const item =document.getElementById('item').value//持ち物
158
+
159
+ const memo =document.getElementById('memo').value//メモ
160
+
161
+
162
+
163
+ let todolists = [todo,date,price,duedate,item,memo];
164
+
165
+ console.log(todolists);
166
+
167
+ mainTable = document.querySelector('.main-table')// テーブル要素を取得する
168
+
169
+ row = mainTable.insertRow(-1) //テーブルに行を追加してその行を返す
170
+
171
+ todolists.unshift(j);
172
+
173
+
174
+
33
175
  for (var i = 0; i < 7; i++){
34
176
 
35
177
  cell = row.insertCell(-1) //行に <td> を追加して、その<td>を返す
@@ -54,6 +196,8 @@
54
196
 
55
197
 
56
198
 
199
+ // 削除用配列
200
+
57
201
  let ch = [];
58
202
 
59
203
  function selectRow(obj) {
@@ -64,6 +208,36 @@
64
208
 
65
209
  }
66
210
 
211
+
212
+
213
+ function deleteRow(obj) {
214
+
215
+ // 削除ボタンを押下された行を取得
216
+
217
+ tr = obj.parentNode.parentNode;
218
+
219
+ // trのインデックスを取得して行を削除する
220
+
221
+ tr.parentNode.deleteRow(tr.sectionRowIndex);
222
+
223
+ }
224
+
225
+
226
+
227
+ // function deleteCheck() {
228
+
229
+ // var table = document.getElementById("table");
230
+
231
+ // var rowLen = table.rows.length;
232
+
233
+ // if(rowLen = true){
234
+
235
+ // table.deleteRow(this);
236
+
237
+ // }
238
+
239
+ // };
240
+
67
241
  document.getElementById("clearButton").onclick = function(){
68
242
 
69
243
  deleteSelect();
@@ -88,6 +262,26 @@
88
262
 
89
263
  }
90
264
 
265
+
266
+
267
+
268
+
269
+ function deleteAll() {
270
+
271
+ var table = document.getElementById("table");
272
+
273
+ var rowLen = table.rows.length;
274
+
275
+ for (var i = rowLen-1; i > 0; i--) {
276
+
277
+ table.deleteRow(i);
278
+
279
+ }
280
+
281
+ };
282
+
283
+
284
+
91
285
  ```
92
286
 
93
287