JSPのテーブルで、「行」をラジオボタンで選択して削除ボタンで消す方法

JSPのテーブルで、「行」をラジオボタンで選択して削除ボタンで消す方法について

只今勉強中の初心者です。

テーブルの「行」をボタンで消すやり方は下記のようにできたのですが、
ラジオボタンで選択して「行」を消す方法がわかりません。

よろしくお願いします。

<body>

 <h2>社員一覧</h2>

 <form>

 <table border="1" >

 <tr bgcolor="#87ceeb">

 <th></th>
 <th>社員コード</th>
 <th>氏名</th>
 <th>氏名カナ</th>
 <th>性別</th>
 <th>役職名</th>
 <th>所属部署名</th>
 <th>在職情報</th>
 </tr>

 <%

 List<Tableclass> list=(List<Tableclass>)request.getAttribute("list");
 for(int i=0; i<list.size(); i++){
 Tableclass Tableclass = list.get(i);

 %>

 <tr>

 <%
 if (i == 0) {
 %>

 <td><label><input type="radio" name="radiobuttn"value="s_id" checked></label>

 <%
 } else {
 %>

 <td><label><input type="radio" name="radiobuttn"value="s_id"></label>

 <%
 }
 %>

 <td><%=Tableclass.getS_id() %>
 <td><%=Tableclass.getL_name() %>&nbsp;<%=Tableclass.getF_name() %></td>
 <td><%=Tableclass.getL_name_kana() %>&nbsp;<%=Tableclass.getF_name_kana() %></td>
 <td><%=Tableclass.getSex() %>
 <td><%=Tableclass.getClas() %>
 <td><%=Tableclass.getDepart_name() %>
 <td><%=Tableclass.getRetired() %>

 <%
 }
 %>

 <script type="text/javascript">
 function remove_row(o){
 var TR = o.parentNode.parentNode;
 TR.parentNode.deleteRow(TR.sectionRowIndex);
 }
 </script>

 <td><input type="button" value="削除"
onclick="remove_row(this)"></td>
 </table>

 <br/>

 <input type="submit" value="削除" value="s_id">
 <input type="submit" value="登録">
 <input type="submit" value="更新">
 <input type="submit" value="戻る">

 </form>

 </body>

行動規範の内容に同意します

回答2件

ソースコードを見た限りでは、JavaScriptにて表示している一覧から消したいようですので、それぞれのラジオボタンに、onclick="removeRow(this)" をつければできるでしょうか。

ただし removeRowのスクリプトも誤りがありますね。次のスクリプトなら動作するでしょうか。

javascript
1<script type="text/javascript">
2function remove_row(target){
3  var TR = target.parentNode.parentNode;
4  TR.parentNode.deleteRow(TR.rowIndex -1);
5}
6</script>

deleteRow は tableまたはtbodyでしか作用しません。
行要素のrowIndexは開始番号が1からですが、deleteRowで指定する番号は0からです。

投稿2017/07/12 08:28

A-pZ

総合スコア12011

退会済みユーザー

2017/07/13 07:47

A-pZ　さん回答ありがとうございます。ラジオボタンに、onclick="removeRow(this)" を付け、 <% if (i == 0) { %> <td><label><input type="radio" name="radiobutton" value="s_id" onclick="removeRow(this)" checked></label></td> <% } else { %> <td><label><input type="radio" name="radiobutton" value="s_id" onclick="removeRow(this)" ></label></td> <% } %> スクリプトも書いてくださった記述に変え、削除ボタンの <input type="submit" value="削除" value="s_id"onclick="remove_row(this)"> でやってみたのですが、削除されませんでした。何がいけなかったのでしょうか？何度も質問してすいません。よろしくお願いします。