teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問JSPのテーブルで、「行」をラジオボタンで選択して削除ボタンで消す方法

編集履歴

質問編集履歴

6

回答を元に編集

2017/07/13 05:18

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -18,7 +18,9 @@
18
18
 
19
19
 
20
20
 
21
- ```ここに言語を入力
21
+ ```
22
+
23
+
22
24
 
23
25
  <%@ page contentType="text/html; charset=UTF-8" %>
24
26
 
@@ -248,4 +250,8 @@
248
250
 
249
251
  </body>
250
252
 
251
- </html>```
253
+ </html>
254
+
255
+
256
+
257
+ ```

5

回答を元に編集しました。

2017/07/13 05:18

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -66,22 +66,40 @@
66
66
 
67
67
  <!-- <th>見出し用のセル -->
68
68
 
69
+
70
+
69
71
  <th></th>
70
72
 
73
+
74
+
71
75
  <!-- 属性scope="col" 列方向（縦列）のセルを対象にする -->
72
76
 
77
+
78
+
73
79
  <th scope="col">社員コード</th>
74
80
 
81
+
82
+
75
83
  <th scope="col">氏名</th>
76
84
 
85
+
86
+
77
87
  <th scope="col">氏名カナ</th>
78
88
 
89
+
90
+
79
91
  <th scope="col">性別</th>
80
92
 
93
+
94
+
81
95
  <th scope="col">役職名</th>
82
96
 
97
+
98
+
83
99
  <th scope="col">所属部署名</th>
84
100
 
101
+
102
+
85
103
  <th scope="col">在職情報</th>
86
104
 
87
105
  </tr>
@@ -142,21 +160,35 @@
142
160
 
143
161
 
144
162
 
145
- <!-- Tableclassの値を取得 -->
163
+ <!-- Tableclassの値を取得 -->
146
-
164
+
165
+
166
+
147
- <td><%=Tableclass.getS_id() %>
167
+ <td><%=Tableclass.getS_id() %>
148
-
168
+
169
+
170
+
149
- <td><%=Tableclass.getL_name() %>&nbsp;<%=Tableclass.getF_name() %></td>
171
+ <td><%=Tableclass.getL_name() %>&nbsp;<%=Tableclass.getF_name() %></td>
172
+
173
+
150
174
 
151
175
  <td><%=Tableclass.getL_name_kana() %>&nbsp;<%=Tableclass.getF_name_kana() %></td>
152
176
 
177
+
178
+
153
- <td><%=Tableclass.getSex() %>
179
+ <td><%=Tableclass.getSex() %>
154
-
180
+
181
+
182
+
155
- <td><%=Tableclass.getClas() %>
183
+ <td><%=Tableclass.getClas() %>
156
-
184
+
185
+
186
+
157
- <td><%=Tableclass.getDepart_name() %>
187
+ <td><%=Tableclass.getDepart_name() %>
158
-
188
+
189
+
190
+
159
- <td><%=Tableclass.getRetired() %>
191
+ <td><%=Tableclass.getRetired() %>
160
192
 
161
193
 
162
194
 
@@ -176,6 +208,8 @@
176
208
 
177
209
  function removeRow() {
178
210
 
211
+
212
+
179
213
  var selectedRadio = document.querySelectorAll("#table input[type='radio']:checked")[0];
180
214
 
181
215
  selectedRadio.parentNode.parentNode.parentNode.remove();
@@ -194,10 +228,16 @@
194
228
 
195
229
  <button id="delete-button" onclick="removeRow();">削除</button>
196
230
 
231
+
232
+
197
233
  <input type="submit" value="登録" name="registration" value="s_id">
198
234
 
235
+
236
+
199
237
  <input type="submit" value="更新">
200
238
 
239
+
240
+
201
241
  <input type="button" onclick="location.href='http://localhost:8080/kusumotomgkadai/kadai/kintaikanrisystem.jsp'" value="戻る">
202
242
 
203
243
 

4

回答の参考を元に編集

2017/07/13 04:59

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -20,158 +20,192 @@
20
20
 
21
21
  ```ここに言語を入力
22
22
 
23
- <form>
24
-
25
-
26
-
27
- <!-- border属性で枠線を作成 -->
28
-
29
- <table border="1" >
30
-
31
-
32
-
33
- <!-- <tr>表の行 -->
34
-
35
- <!-- bgcolorで表の背景色を指定 -->
36
-
37
- <tr bgcolor="#87ceeb">
38
-
39
-
40
-
41
- <!-- <th>見出し用のセル -->
42
-
43
- <th></th>
44
-
45
- <!-- 属性scope="col" 列方向（縦列）のセルを対象にする -->
46
-
47
- <th scope="col">社員コード</th>
48
-
49
- <th scope="col">氏名</th>
50
-
51
- <th scope="col">氏名カナ</th>
52
-
53
- <th scope="col">性別</th>
54
-
55
- <th scope="col">役職名</th>
56
-
57
- <th scope="col">所属部署名</th>
58
-
59
- <th scope="col">在職情報</th>
60
-
61
- </tr>
62
-
63
-
64
-
65
- <%
66
-
67
-
68
-
69
- List<Tableclass> list=(List<Tableclass>)request.getAttribute("list");
70
-
71
- for(int i=0; i<list.size(); i++){
72
-
73
- Tableclass Tableclass = list.get(i);
74
-
75
-
76
-
77
- %>
78
-
79
-
80
-
81
- <tr>
82
-
83
-
84
-
85
- <%
86
-
87
- if (i == 0) {
88
-
89
- %>
90
-
91
-
92
-
93
- <td><label><input type="radio" name="radiobutton" value="s_id" onclick="removeRow(this)" checked></label>
94
-
95
-
96
-
97
- <%
98
-
99
- } else {
100
-
101
- %>
102
-
103
-
104
-
105
- <td><label><input type="radio" name="radiobutton"value="s_id"onclick="removeRow(this)" ></label>
106
-
107
-
108
-
109
- <%
110
-
111
- }
112
-
113
- %>
114
-
115
- <!-- Tableclassの値を取得 -->
116
-
117
- <td><%=Tableclass.getS_id() %>
118
-
119
- <td><%=Tableclass.getL_name() %> <%=Tableclass.getF_name() %></td>
120
-
121
- <td><%=Tableclass.getL_name_kana() %> <%=Tableclass.getF_name_kana() %></td>
122
-
123
- <td><%=Tableclass.getSex() %>
124
-
125
- <td><%=Tableclass.getClas() %>
126
-
127
- <td><%=Tableclass.getDepart_name() %>
128
-
129
- <td><%=Tableclass.getRetired() %>
130
-
131
-
132
-
133
- <%
134
-
135
- }
136
-
137
- %>
138
-
139
-
140
-
141
- <script type="text/javascript">
142
-
143
- function remove_row(target){
144
-
145
- var TR = target.parentNode.parentNode;
146
-
147
- TR.parentNode.deleteRow(TR.rowIndex -1);
148
-
149
- }
150
-
151
- </script>
152
-
153
-
154
-
155
- </table>
156
-
157
-
158
-
159
- <br/>
160
-
161
-
162
-
163
- <!-- ボタン -->
164
-
165
- <input type="submit" value="削除" value="s_id"onclick="remove_row(this)">
166
-
167
- <input type="submit" value="登録" value="s_id">
168
-
169
- <input type="submit" value="更新">
170
-
171
- <input type="submit" value="戻る">
172
-
173
-
174
-
175
- </form>
176
-
177
- ```
23
+ <%@ page contentType="text/html; charset=UTF-8" %>
24
+
25
+ <%@ page import="java.util.List,servlet.Tableclass" %>
26
+
27
+
28
+
29
+ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
30
+
31
+ <html>
32
+
33
+ <head>
34
+
35
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
36
+
37
+ <title>Insert title here</title>
38
+
39
+ </head>
40
+
41
+ <body>
42
+
43
+
44
+
45
+ <h2>社員一覧</h2>
46
+
47
+
48
+
49
+ <form>
50
+
51
+
52
+
53
+ <!-- border属性で枠線を作成 -->
54
+
55
+ <table border="1" id="table">
56
+
57
+
58
+
59
+ <!-- <tr>表の行 -->
60
+
61
+ <!-- bgcolorで表の背景色を指定 -->
62
+
63
+ <tr bgcolor="#87ceeb">
64
+
65
+
66
+
67
+ <!-- <th>見出し用のセル -->
68
+
69
+ <th></th>
70
+
71
+ <!-- 属性scope="col" 列方向（縦列）のセルを対象にする -->
72
+
73
+ <th scope="col">社員コード</th>
74
+
75
+ <th scope="col">氏名</th>
76
+
77
+ <th scope="col">氏名カナ</th>
78
+
79
+ <th scope="col">性別</th>
80
+
81
+ <th scope="col">役職名</th>
82
+
83
+ <th scope="col">所属部署名</th>
84
+
85
+ <th scope="col">在職情報</th>
86
+
87
+ </tr>
88
+
89
+
90
+
91
+ <%
92
+
93
+
94
+
95
+ List<Tableclass> list=(List<Tableclass>)request.getAttribute("list");
96
+
97
+ for(int i=0; i<list.size(); i++){
98
+
99
+ Tableclass Tableclass = list.get(i);
100
+
101
+
102
+
103
+ %>
104
+
105
+
106
+
107
+ <tr>
108
+
109
+
110
+
111
+ <%
112
+
113
+ if (i == 0) {
114
+
115
+ %>
116
+
117
+
118
+
119
+ <td><label><input type="radio" name="radiobutton" value="s_id" checked></label></td>
120
+
121
+
122
+
123
+ <%
124
+
125
+ } else {
126
+
127
+ %>
128
+
129
+
130
+
131
+
132
+
133
+ <td><label><input type="radio" name="radiobutton" value="s_id"></label></td>
134
+
135
+
136
+
137
+ <%
138
+
139
+ }
140
+
141
+ %>
142
+
143
+
144
+
145
+ <!-- Tableclassの値を取得 -->
146
+
147
+ <td><%=Tableclass.getS_id() %>
148
+
149
+ <td><%=Tableclass.getL_name() %>&nbsp;<%=Tableclass.getF_name() %></td>
150
+
151
+ <td><%=Tableclass.getL_name_kana() %>&nbsp;<%=Tableclass.getF_name_kana() %></td>
152
+
153
+ <td><%=Tableclass.getSex() %>
154
+
155
+ <td><%=Tableclass.getClas() %>
156
+
157
+ <td><%=Tableclass.getDepart_name() %>
158
+
159
+ <td><%=Tableclass.getRetired() %>
160
+
161
+
162
+
163
+ <%
164
+
165
+ }
166
+
167
+ %>
168
+
169
+
170
+
171
+ </table>
172
+
173
+
174
+
175
+ <script type="text/javascript">
176
+
177
+ function removeRow() {
178
+
179
+ var selectedRadio = document.querySelectorAll("#table input[type='radio']:checked")[0];
180
+
181
+ selectedRadio.parentNode.parentNode.parentNode.remove();
182
+
183
+ }
184
+
185
+ </script>
186
+
187
+
188
+
189
+ <br/>
190
+
191
+
192
+
193
+ <!-- ボタン -->
194
+
195
+ <button id="delete-button" onclick="removeRow();">削除</button>
196
+
197
+ <input type="submit" value="登録" name="registration" value="s_id">
198
+
199
+ <input type="submit" value="更新">
200
+
201
+ <input type="button" onclick="location.href='http://localhost:8080/kusumotomgkadai/kadai/kintaikanrisystem.jsp'" value="戻る">
202
+
203
+
204
+
205
+ </form>
206
+
207
+
208
+
209
+ </body>
210
+
211
+ </html>```

3

質問が重複していたため、質問を削除しようとしたのですが、消し方がわからず質問文を消しましたが、ご指摘をいただいて修復しました。

2017/07/13 04:54

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- 質問を削除しました。。。。。。
1
+ JSPのテーブルで、「行」をラジオボタンで選択して削除ボタンで消す方法
test CHANGED
@@ -1 +1,177 @@
1
+ JSPのテーブルで、「行」をラジオボタンで選択して削除ボタンで消す方法について
2
+
3
+
4
+
5
+ 只今勉強中の初心者です。
6
+
7
+
8
+
9
+ テーブルのラジオボタンで選択して、削除ボタンで、「行」を消す方法がわかりません。
10
+
11
+ 具体的には、削除ボタンが押されたときにラジオボタンで選択された１行を消す方法です。
12
+
13
+
14
+
15
+ よろしくお願いします。
16
+
17
+
18
+
19
+
20
+
21
+ ```ここに言語を入力
22
+
23
+ <form>
24
+
25
+
26
+
27
+ <!-- border属性で枠線を作成 -->
28
+
29
+ <table border="1" >
30
+
31
+
32
+
33
+ <!-- <tr>表の行 -->
34
+
35
+ <!-- bgcolorで表の背景色を指定 -->
36
+
37
+ <tr bgcolor="#87ceeb">
38
+
39
+
40
+
41
+ <!-- <th>見出し用のセル -->
42
+
43
+ <th></th>
44
+
45
+ <!-- 属性scope="col" 列方向（縦列）のセルを対象にする -->
46
+
47
+ <th scope="col">社員コード</th>
48
+
49
+ <th scope="col">氏名</th>
50
+
51
+ <th scope="col">氏名カナ</th>
52
+
53
+ <th scope="col">性別</th>
54
+
55
+ <th scope="col">役職名</th>
56
+
57
+ <th scope="col">所属部署名</th>
58
+
59
+ <th scope="col">在職情報</th>
60
+
61
+ </tr>
62
+
63
+
64
+
65
+ <%
66
+
67
+
68
+
69
+ List<Tableclass> list=(List<Tableclass>)request.getAttribute("list");
70
+
71
+ for(int i=0; i<list.size(); i++){
72
+
73
+ Tableclass Tableclass = list.get(i);
74
+
75
+
76
+
77
+ %>
78
+
79
+
80
+
81
+ <tr>
82
+
83
+
84
+
85
+ <%
86
+
87
+ if (i == 0) {
88
+
89
+ %>
90
+
91
+
92
+
93
+ <td><label><input type="radio" name="radiobutton" value="s_id" onclick="removeRow(this)" checked></label>
94
+
95
+
96
+
97
+ <%
98
+
99
+ } else {
100
+
101
+ %>
102
+
103
+
104
+
105
+ <td><label><input type="radio" name="radiobutton"value="s_id"onclick="removeRow(this)" ></label>
106
+
107
+
108
+
109
+ <%
110
+
111
+ }
112
+
113
+ %>
114
+
115
+ <!-- Tableclassの値を取得 -->
116
+
117
+ <td><%=Tableclass.getS_id() %>
118
+
119
+ <td><%=Tableclass.getL_name() %> <%=Tableclass.getF_name() %></td>
120
+
1
- 質問取り消ししました。*******************************************************************************************
121
+ <td><%=Tableclass.getL_name_kana() %> <%=Tableclass.getF_name_kana() %></td>
122
+
123
+ <td><%=Tableclass.getSex() %>
124
+
125
+ <td><%=Tableclass.getClas() %>
126
+
127
+ <td><%=Tableclass.getDepart_name() %>
128
+
129
+ <td><%=Tableclass.getRetired() %>
130
+
131
+
132
+
133
+ <%
134
+
135
+ }
136
+
137
+ %>
138
+
139
+
140
+
141
+ <script type="text/javascript">
142
+
143
+ function remove_row(target){
144
+
145
+ var TR = target.parentNode.parentNode;
146
+
147
+ TR.parentNode.deleteRow(TR.rowIndex -1);
148
+
149
+ }
150
+
151
+ </script>
152
+
153
+
154
+
155
+ </table>
156
+
157
+
158
+
159
+ <br/>
160
+
161
+
162
+
163
+ <!-- ボタン -->
164
+
165
+ <input type="submit" value="削除" value="s_id"onclick="remove_row(this)">
166
+
167
+ <input type="submit" value="登録" value="s_id">
168
+
169
+ <input type="submit" value="更新">
170
+
171
+ <input type="submit" value="戻る">
172
+
173
+
174
+
175
+ </form>
176
+
177
+ ```

2

質問が重複しているため、削除しました。

2017/07/13 04:44

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- JSPのテーブルで、「行」をラジオボタンで選択して削除ボタンで消す方法
1
+ 質問を削除しました。。。。。。
test CHANGED
@@ -1,177 +1 @@
1
- JSPのテーブルで、「行」をラジオボタンで選択して削除ボタンで消す方法について
2
-
3
-
4
-
5
- 只今勉強中の初心者です。
6
-
7
-
8
-
9
- テーブルのラジオボタンで選択して、削除ボタンで、「行」を消す方法がわかりません。
10
-
11
- 具体的には、削除ボタンが押されたときにラジオボタンで選択された１行を消す方法です。
12
-
13
-
14
-
15
- よろしくお願いします。
16
-
17
-
18
-
19
-
20
-
21
- ```ここに言語を入力
22
-
23
- <form>
24
-
25
-
26
-
27
- <!-- border属性で枠線を作成 -->
28
-
29
- <table border="1" >
30
-
31
-
32
-
33
- <!-- <tr>表の行 -->
34
-
35
- <!-- bgcolorで表の背景色を指定 -->
36
-
37
- <tr bgcolor="#87ceeb">
38
-
39
-
40
-
41
- <!-- <th>見出し用のセル -->
42
-
43
- <th></th>
44
-
45
- <!-- 属性scope="col" 列方向（縦列）のセルを対象にする -->
46
-
47
- <th scope="col">社員コード</th>
48
-
49
- <th scope="col">氏名</th>
50
-
51
- <th scope="col">氏名カナ</th>
52
-
53
- <th scope="col">性別</th>
54
-
55
- <th scope="col">役職名</th>
56
-
57
- <th scope="col">所属部署名</th>
58
-
59
- <th scope="col">在職情報</th>
60
-
61
- </tr>
62
-
63
-
64
-
65
- <%
66
-
67
-
68
-
69
- List<Tableclass> list=(List<Tableclass>)request.getAttribute("list");
70
-
71
- for(int i=0; i<list.size(); i++){
72
-
73
- Tableclass Tableclass = list.get(i);
74
-
75
-
76
-
77
- %>
78
-
79
-
80
-
81
- <tr>
82
-
83
-
84
-
85
- <%
86
-
87
- if (i == 0) {
88
-
89
- %>
90
-
91
-
92
-
93
- <td><label><input type="radio" name="radiobutton" value="s_id" onclick="removeRow(this)" checked></label>
94
-
95
-
96
-
97
- <%
98
-
99
- } else {
100
-
101
- %>
102
-
103
-
104
-
105
- <td><label><input type="radio" name="radiobutton"value="s_id"onclick="removeRow(this)" ></label>
106
-
107
-
108
-
109
- <%
110
-
111
- }
112
-
113
- %>
114
-
115
- <!-- Tableclassの値を取得 -->
116
-
117
- <td><%=Tableclass.getS_id() %>
118
-
119
- <td><%=Tableclass.getL_name() %>&nbsp;<%=Tableclass.getF_name() %></td>
1
+ 質問取り消ししました。*******************************************************************************************
120
-
121
- <td><%=Tableclass.getL_name_kana() %>&nbsp;<%=Tableclass.getF_name_kana() %></td>
122
-
123
- <td><%=Tableclass.getSex() %>
124
-
125
- <td><%=Tableclass.getClas() %>
126
-
127
- <td><%=Tableclass.getDepart_name() %>
128
-
129
- <td><%=Tableclass.getRetired() %>
130
-
131
-
132
-
133
- <%
134
-
135
- }
136
-
137
- %>
138
-
139
-
140
-
141
- <script type="text/javascript">
142
-
143
- function remove_row(target){
144
-
145
- var TR = target.parentNode.parentNode;
146
-
147
- TR.parentNode.deleteRow(TR.rowIndex -1);
148
-
149
- }
150
-
151
- </script>
152
-
153
-
154
-
155
- </table>
156
-
157
-
158
-
159
- <br/>
160
-
161
-
162
-
163
- <!-- ボタン -->
164
-
165
- <input type="submit" value="削除" value="s_id"onclick="remove_row(this)">
166
-
167
- <input type="submit" value="登録" value="s_id">
168
-
169
- <input type="submit" value="更新">
170
-
171
- <input type="submit" value="戻る">
172
-
173
-
174
-
175
- </form>
176
-
177
- ```

1

具体的な説明の追記

2017/07/13 04:33

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -7,6 +7,8 @@
7
7
 
8
8
 
9
9
  テーブルのラジオボタンで選択して、削除ボタンで、「行」を消す方法がわかりません。
10
+
11
+ 具体的には、削除ボタンが押されたときにラジオボタンで選択された１行を消す方法です。
10
12
 
11
13
 
12
14