回答編集履歴
2
調整
test
CHANGED
|
@@ -1,35 +1,36 @@
|
|
|
1
|
+
# 調整版
|
|
1
2
|
```javascript
|
|
2
3
|
<script>
|
|
3
4
|
window.addEventListener('DOMContentLoaded', ()=>{
|
|
4
|
-
// const result = document.getElementById("result");
|
|
5
|
-
const tuikaBtn = document.
|
|
5
|
+
const tuikaBtn = document.querySelector("#tuikaBtn");
|
|
6
|
-
const formobject = document.
|
|
6
|
+
const formobject = document.querySelector("#form-area");
|
|
7
|
-
const tableobject = document.
|
|
7
|
+
const tableobject = document.querySelector("#tourokuTable tbody");
|
|
8
|
-
const namae = document.
|
|
8
|
+
const namae = document.querySelector("#namae");
|
|
9
|
-
const nickname = document.
|
|
9
|
+
const nickname = document.querySelector("#nickname");
|
|
10
|
-
|
|
10
|
+
const tuikaBtnView=()=>{
|
|
11
|
+
const tuikanumber=tableobject.querySelectorAll('tr').length;
|
|
12
|
+
tuikaBtn.style.visibility=tuikanumber>=3?"hidden":"";
|
|
13
|
+
}
|
|
11
14
|
tuikaBtn.addEventListener('click',()=>{
|
|
12
15
|
if(namae.value == "" || nickname.value == "") return false;
|
|
13
16
|
let kakunin = confirm(`${namae.value}さん${nickname.value}を登録します。よろしいですか？`);
|
|
14
17
|
if(!kakunin) return false;
|
|
15
|
-
tuikanumber++;
|
|
16
18
|
alert(`${namae.value}さん${nickname.value}にて登録しました。`);
|
|
17
|
-
if(tuikanumber >= 3) {
|
|
18
|
-
tuikaBtn.style.visibility = "hidden";
|
|
19
|
-
}
|
|
20
19
|
let tr = "<tr>";
|
|
21
|
-
tr += `<td><input type="button" value="del" class="del"</td>`;
|
|
22
20
|
tr += `<td>${formobject.namae.value}</td>`;
|
|
23
21
|
tr += `<td>${formobject.nickname.value}</td>`;
|
|
22
|
+
tr += `<td><input type="button" value="del" class="del"</td>`;
|
|
24
23
|
tr += `</tr>`;
|
|
25
24
|
tableobject.insertAdjacentHTML( "beforeend", tr );
|
|
25
|
+
tuikaBtnView();
|
|
26
26
|
});
|
|
27
|
+
document.addEventListener('click',e=>{
|
|
28
|
+
const t=e.target;
|
|
29
|
+
if(t.matches('.del')){
|
|
30
|
+
t.closest('tr').remove();
|
|
31
|
+
tuikaBtnView();
|
|
32
|
+
}
|
|
27
|
-
});
|
|
33
|
+
});
|
|
28
|
-
document.addEventListener('click',e=>{
|
|
29
|
-
const t=e.target;
|
|
30
|
-
if(t.matches('.del')){
|
|
31
|
-
t.closest('tr').remove();
|
|
32
|
-
}
|
|
33
34
|
});
|
|
34
35
|
</script>
|
|
35
36
|
|
|
@@ -50,11 +51,15 @@
|
|
|
50
51
|
</form>
|
|
51
52
|
|
|
52
53
|
<table id="tourokuTable" >
|
|
54
|
+
<thead>
|
|
53
55
|
<tr>
|
|
54
|
-
<th>削除</th>
|
|
55
56
|
<th id="tableName">名前</th>
|
|
56
57
|
<th id="tableNickname">ニックネーム</th>
|
|
58
|
+
<th> </th>
|
|
57
59
|
</tr>
|
|
60
|
+
</thead>
|
|
61
|
+
<tbody>
|
|
62
|
+
</tbody>
|
|
58
63
|
</table>
|
|
59
64
|
```
|
|
60
65
|
|
1
tuiki
test
CHANGED
|
@@ -57,3 +57,74 @@
|
|
|
57
57
|
</tr>
|
|
58
58
|
</table>
|
|
59
59
|
```
|
|
60
|
+
|
|
61
|
+
# 参考
|
|
62
|
+
UI的にはチェックしてまとめて削除のほうが楽かもしれません
|
|
63
|
+
```javascript
|
|
64
|
+
<script>
|
|
65
|
+
window.addEventListener('DOMContentLoaded', ()=>{
|
|
66
|
+
const tuikaBtn = document.querySelector("#tuikaBtn");
|
|
67
|
+
const sakujoBtn = document.querySelector("#sakujoBtn");
|
|
68
|
+
const formobject = document.querySelector("#form-area");
|
|
69
|
+
const tableobject = document.querySelector("#tourokuTable tbody");
|
|
70
|
+
const namae = document.querySelector("#namae");
|
|
71
|
+
const nickname = document.querySelector("#nickname");
|
|
72
|
+
const tuikaBtnView=()=>{
|
|
73
|
+
const tuikanumber=tableobject.querySelectorAll('tr').length;
|
|
74
|
+
tuikaBtn.toggleAttribute("hidden",tuikanumber>=3);
|
|
75
|
+
}
|
|
76
|
+
tuikaBtn.addEventListener('click',()=>{
|
|
77
|
+
if(namae.value == "" || nickname.value == "") return false;
|
|
78
|
+
let kakunin = confirm(`${namae.value}さん${nickname.value}を登録します。よろしいですか？`);
|
|
79
|
+
if(!kakunin) return false;
|
|
80
|
+
alert(`${namae.value}さん${nickname.value}にて登録しました。`);
|
|
81
|
+
let tr = "<tr>";
|
|
82
|
+
tr += `<td><input type="checkbox" class="del"></td>`;
|
|
83
|
+
tr += `<td>${formobject.namae.value}</td>`;
|
|
84
|
+
tr += `<td>${formobject.nickname.value}</td>`;
|
|
85
|
+
tr += `</tr>`;
|
|
86
|
+
tableobject.insertAdjacentHTML( "beforeend", tr );
|
|
87
|
+
tuikaBtnView();
|
|
88
|
+
});
|
|
89
|
+
sakujoBtn.addEventListener('click',()=>{
|
|
90
|
+
let sakujo = document.querySelectorAll('.del:checked');
|
|
91
|
+
if(sakujo.length==0){
|
|
92
|
+
alert('チェックして!');
|
|
93
|
+
return false;
|
|
94
|
+
}
|
|
95
|
+
let kakunin = confirm(`チェックしたデータを削除ますか？`);
|
|
96
|
+
if(kakunin) sakujo.forEach(x=>x.closest('tr').remove());
|
|
97
|
+
tuikaBtnView();
|
|
98
|
+
});
|
|
99
|
+
});
|
|
100
|
+
</script>
|
|
101
|
+
|
|
102
|
+
<form id="form-area" method="post">
|
|
103
|
+
<div class="form-group">
|
|
104
|
+
<div class="input-group">
|
|
105
|
+
<input id="namae" name="namae" type="text" class="form-control" placeholder="名前">
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
<div class="form-group">
|
|
109
|
+
<div class="input-group">
|
|
110
|
+
<input id="nickname" name="nickname" type="text" class="form-control" placeholder="ニックネーム">
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
<div class="form-group">
|
|
114
|
+
<input id="tuikaBtn" type="button" name="touroku" value="追加">
|
|
115
|
+
<input id="sakujoBtn" type="button" name="sakujo" value="削除">
|
|
116
|
+
</div>
|
|
117
|
+
</form>
|
|
118
|
+
|
|
119
|
+
<table id="tourokuTable" >
|
|
120
|
+
<thead>
|
|
121
|
+
<tr>
|
|
122
|
+
<th>削除</th>
|
|
123
|
+
<th id="tableName">名前</th>
|
|
124
|
+
<th id="tableNickname">ニックネーム</th>
|
|
125
|
+
</tr>
|
|
126
|
+
</thead>
|
|
127
|
+
<tbody>
|
|
128
|
+
</tbody>
|
|
129
|
+
</table>
|
|
130
|
+
```
|