質問編集履歴
6
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -144,6 +144,7 @@
|
|
|
144
144
|
targets.length === 2
|
|
145
145
|
このあたりだとは思うのですが、どう修正したらよろしいでしょうか？
|
|
146
146
|
|
|
147
|
+
|
|
147
148
|
|
|
148
149
|
```ここに言語を入力
|
|
149
150
|
<script type="text/javascript">
|
5
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -133,4 +133,55 @@
|
|
|
133
133
|
|
|
134
134
|
|
|
135
135
|
|
|
136
|
-
どうすれば続いて表示されるようにできるでしょうか？
|
|
136
|
+
どうすれば続いて表示されるようにできるでしょうか？
|
|
137
|
+
|
|
138
|
+
---
|
|
139
|
+
6/19 12:03 追記
|
|
140
|
+
id="btn_delete" disabled="true"
|
|
141
|
+
class="skill_hoge"
|
|
142
|
+
|
|
143
|
+
追加させて頂きテストしましたが、今度は削除ボタンが全部押せなくなっております。
|
|
144
|
+
targets.length === 2
|
|
145
|
+
このあたりだとは思うのですが、どう修正したらよろしいでしょうか？
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
```ここに言語を入力
|
|
149
|
+
<script type="text/javascript">
|
|
150
|
+
function skill_selectAdd(){
|
|
151
|
+
var get = document.getElementById("skill_select");
|
|
152
|
+
var set = get.cloneNode(true);
|
|
153
|
+
var target = document.getElementById("skill_selectAdd");
|
|
154
|
+
var btn_delete = document.getElementById("btn_delete");
|
|
155
|
+
set.id= "test" + target.children.length;//idの重複を防ぐため、連番をつけておく
|
|
156
|
+
target.parentNode.insertBefore(set, target);
|
|
157
|
+
btn_delete.setAttribute("disabled", "false");
|
|
158
|
+
}
|
|
159
|
+
function skill_selectDel(){
|
|
160
|
+
var targets = document.getElementsByClassName("skill_hoge");
|
|
161
|
+
var btn_delete = document.getElementById("btn_delete");
|
|
162
|
+
if (targets.length === 2) {
|
|
163
|
+
btn_delete.setAttribute("disabled", "true");
|
|
164
|
+
}
|
|
165
|
+
targets[1].parentnode.removeChild(targets[targets.length - 1]);//最後の要素を削除
|
|
166
|
+
}
|
|
167
|
+
</script>
|
|
168
|
+
<tr id="skill_select" class="skill_hoge">
|
|
169
|
+
<td>
|
|
170
|
+
<select name="programs1[]">
|
|
171
|
+
<?php echo Programmerskill::getSkill(); ?>
|
|
172
|
+
</select>
|
|
173
|
+
</td>
|
|
174
|
+
<td>
|
|
175
|
+
<select name="programs_year1[]">
|
|
176
|
+
<?php echo Skillyear::getYear(); ?>
|
|
177
|
+
</select>
|
|
178
|
+
</td>
|
|
179
|
+
</tr>
|
|
180
|
+
<tr id="skill_selectAdd">
|
|
181
|
+
<td colspan="2">
|
|
182
|
+
<input type="button" value="追加" onClick="skill_selectAdd()">
|
|
183
|
+
<input type="button" value="削除" onClick="skill_selectDel()" id="btn_delete" disabled="true">
|
|
184
|
+
</td>
|
|
185
|
+
</tr>
|
|
186
|
+
|
|
187
|
+
```
|
4
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -131,4 +131,6 @@
|
|
|
131
131
|
テーブルタグ内にdivを入れているせいなのか
|
|
132
132
|
追加表示がテーブル外に表示されてしまいます。
|
|
133
133
|
|
|
134
|
+
|
|
135
|
+
|
|
134
136
|
どうすれば続いて表示されるようにできるでしょうか？
|
3
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -78,4 +78,57 @@
|
|
|
78
78
|
・追加された要素（消せる）
|
|
79
79
|
・追加された要素（消せる）
|
|
80
80
|
・追加された要素（消せる）
|
|
81
|
-
・追加された要素（消せる）
|
|
81
|
+
・追加された要素（消せる）
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
↓6/19 3:44 追記
|
|
86
|
+
|
|
87
|
+
こちらで回答頂いたものを、追加で実装しました。
|
|
88
|
+
|
|
89
|
+
```ここに言語を入力
|
|
90
|
+
<script type="text/javascript">
|
|
91
|
+
function skill_selectAdd(){
|
|
92
|
+
var get = document.getElementById("skill_select");
|
|
93
|
+
var set = get.cloneNode(true);
|
|
94
|
+
var target = document.getElementById("skill_select_added");
|
|
95
|
+
var btnDelete = document.getElementById("btnDelete ");
|
|
96
|
+
set.id= "test" + target.children.length;
|
|
97
|
+
target.appendChild(set);
|
|
98
|
+
btnDelete.setAttribute("disabled", "false");
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
function skill_selectDel(){
|
|
102
|
+
var target = document.getElementById("skill_select_added");
|
|
103
|
+
target.removeChild(target.lastElementChild);
|
|
104
|
+
if (target.children.length === 0) {
|
|
105
|
+
btnDelete.setAttribute("disabled", "true");
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
</script>
|
|
109
|
+
<tr id="skill_select">
|
|
110
|
+
<td>
|
|
111
|
+
<select name="programs1[]">
|
|
112
|
+
<?php echo Programmerskill::getSkill(); ?>
|
|
113
|
+
</select>
|
|
114
|
+
</td>
|
|
115
|
+
<td>
|
|
116
|
+
<select name="programs_year1[]">
|
|
117
|
+
<?php echo Skillyear::getYear(); ?>
|
|
118
|
+
</select>
|
|
119
|
+
</td>
|
|
120
|
+
</tr>
|
|
121
|
+
<div id="skill_select_added"></div>
|
|
122
|
+
<tr id="skill_selectAdd">
|
|
123
|
+
<td colspan="2">
|
|
124
|
+
<input type="button" value="追加" onClick="skill_selectAdd()">
|
|
125
|
+
<input type="button" value="削除" onClick="skill_selectDel()">
|
|
126
|
+
</td>
|
|
127
|
+
</tr>
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
削除しすぎない問題点は解決できましたが
|
|
131
|
+
テーブルタグ内にdivを入れているせいなのか
|
|
132
|
+
追加表示がテーブル外に表示されてしまいます。
|
|
133
|
+
|
|
134
|
+
どうすれば続いて表示されるようにできるでしょうか？
|
2
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -28,23 +28,54 @@
|
|
|
28
28
|
}
|
|
29
29
|
</script>
|
|
30
30
|
|
|
31
|
-
<tr id="
|
|
31
|
+
<tr id="skill_select">
|
|
32
32
|
<td>
|
|
33
|
-
<select name="
|
|
33
|
+
<select name="programs1[]">
|
|
34
34
|
<?php echo Programmerskill::getSkill(); ?>
|
|
35
35
|
</select>
|
|
36
36
|
</td>
|
|
37
37
|
<td>
|
|
38
|
-
<select name="
|
|
38
|
+
<select name="programs_year1[]">
|
|
39
39
|
<?php echo Skillyear::getYear(); ?>
|
|
40
40
|
</select>
|
|
41
41
|
</td>
|
|
42
42
|
</tr>
|
|
43
|
-
|
|
44
|
-
<tr id="
|
|
43
|
+
<tr id="skill_selectAdd">
|
|
45
44
|
<td colspan="2">
|
|
46
|
-
<input type="button" value="追加" onClick="
|
|
45
|
+
<input type="button" value="追加" onClick="skill_selectAdd()">
|
|
46
|
+
<input type="button" value="削除" onClick="skill_selectDel()">
|
|
47
47
|
</td>
|
|
48
48
|
</tr>
|
|
49
|
+
```
|
|
49
50
|
|
|
51
|
+
↓6/17 23:07 追記
|
|
52
|
+
|
|
53
|
+
下記を追加で実装しました。
|
|
54
|
+
```ここに言語を入力
|
|
55
|
+
function skill_selectDel(){
|
|
56
|
+
var get = document.getElementById("skill_selectAdd");
|
|
57
|
+
get.parentNode.removeChild(get.previousElementSibling);
|
|
58
|
+
}
|
|
50
|
-
```
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
↓何もしてない状態
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
↓追加した状態
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
↓削除した状態
|
|
68
|
+
jsで追加したもの以外のエレメントまで削除されている。
|
|
69
|
+
jsで追加したものだけを削除したい。
|
|
70
|
+
|
|
71
|
+
可能であれば、
|
|
72
|
+
追加が１回も押されていなければ削除を非表示にしておいて
|
|
73
|
+
追加が１回でも押されたら削除ボタンを表示させてその機能を使えるようにしたい。
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
・もとからある要素（消せない）
|
|
78
|
+
・追加された要素（消せる）
|
|
79
|
+
・追加された要素（消せる）
|
|
80
|
+
・追加された要素（消せる）
|
|
81
|
+
・追加された要素（消せる）
|
1
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,25 +1,29 @@
|
|
|
1
|
+
6/17 11:30
|
|
2
|
+
記述が抜けているところがありましたので修正しました。
|
|
3
|
+
|
|
1
4
|
下記は、
|
|
2
5
|
idがtestのtr内のエレメントを全てクローンし、
|
|
3
6
|
idがsubmitのtrの前にクローンしたものを追加するjsです。
|
|
4
7
|
|
|
5
8
|
ユーザーが、とりあえず４個追加しとこうと思って追加ボタンを４回クリックしました。
|
|
6
9
|
しかし、実際にセレクトしたのは３つでした。２つ不要です。
|
|
7
|
-
追加したものを
|
|
10
|
+
追加したものを、一番最後に追加したものから削除するjsはどうすればよいでしょうか？
|
|
8
11
|
|
|
9
12
|
・もとからある要素（選択済）
|
|
10
13
|
・追加された要素（選択済）
|
|
11
14
|
・追加された要素（選択済）
|
|
15
|
+
・追加された要素（やっぱりいらない）←次にこれが消える
|
|
12
|
-
・追加された要素（やっぱりいらない）
|
|
16
|
+
・追加された要素（やっぱりいらない）←これが消えて
|
|
13
|
-
・追加された要素（やっぱりいらない）
|
|
14
17
|
|
|
15
18
|
削除ボタンを押したら、一番下から削除していきたいのです。
|
|
16
19
|
|
|
17
20
|
|
|
18
21
|
```ここに言語を入力
|
|
19
22
|
<script type="text/javascript">
|
|
20
|
-
function
|
|
23
|
+
function skill_selectAdd(){
|
|
21
|
-
var
|
|
24
|
+
var get = document.getElementById("skill_select");
|
|
22
|
-
var set =
|
|
25
|
+
var set = get.cloneNode(true);
|
|
26
|
+
var target = document.getElementById("skill_selectAdd");
|
|
23
27
|
target.parentNode.insertBefore(set, target);
|
|
24
28
|
}
|
|
25
29
|
</script>
|