質問編集履歴

1 テーブルに記号「○」ではなく、ラジオボタンを表示するよう修正しました。

退会済みユーザー

退会済みユーザー

2019/02/10 17:49  投稿

【JSP】テーブルにラジオボタンを追加&テーブルを1行ずつ消す
### 前提・実現したいこと
プログラミング初心者です。
初期画面で商品と個数を入力して追加ボタンを押すと、
追加画面にテーブルが1行追加されるようなものを作っています。
追加された行には、商品の情報(IDや商品名、単価等)を表示させるのですが、
一番左に削除するためのラジオボタンをつけなくてはなりません。
1つ目の不明点は、このラジオボタンの付け方がわかりません。
valueでどの行を選んでいるかを判断させないといけないのかと考えていますが、
その行を削除するためにはどう設定したらいいかがわかりません。
2つ目の不明点は削除についてです。
1つ目の質問と被るのですが、テーブルの1行分の全ての項目を削除する方法がわかりません。
検索するとJavaScriptが多く出て来るのですが、使用したことがありません。
また、とある課題なのですが、今までJavaScriptを使用することがなかったため、
使わない方法で作成すると思われます。
### 発生している問題・エラーメッセージ
どう試せばいいかがわからないため、エラーは出ていません。
現状はラジオボタンの代わりに○が表示されるだけのものとなっています。
現状はvalueとContorollerクラスを結びつけていないため、
テーブルの左にラジオボタンが表示されるだけのものとなっています。
### 該当のソースコード
``HTML
ソースコード
```
<%@ page session="false" language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<%@ page import="java.text.*" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" type="text/css" href="/sales/resources/css/common.css" />
   <title>売上システム(明細追加画面)</title>
</head>
<body>
   <form:form modelAttribute="salesForm" action="/sales/system">
       <div class="header">
           <span class="titleName">ショップ</span>
           <% Calendar cal = Calendar.getInstance();
               SimpleDateFormat format = new SimpleDateFormat("M月d日(E)");
               out.println(format.format(cal.getTime())); %>
       </div>
       <div>
           <table>
               <tr>
                   <td><span class="itemName">商品:</span></td>
                   <td>
                       <select name="id" id="id">
                           <option value="A00101">油性ボールペン</option>
                           <option value="A00201">極細ボールペン</option>
                           <option value="A00301">蛍光ペン6色セット</option>
                       </select>
                           <%-- <form:select path="name" items="${itemList}" /> --%>
                   </td>
               </tr>
               <tr>
                   <td><span class="itemName">点数:</span></td>
                   <td><form:input path="quantity" /></td>
               </tr>
           </table>
       </div>
       <div class="addBtn">
           <div>
               <input type="submit" name="add" value="明細追加" />
           </div>
           <div class="message">
               <c:out value="${message}" />
           </div>
       </div>
       <div>
           <div>
               <span class="itemName">売上明細</span>
           </div>
           <table class="itemTable">
               <tr class="tableTitle">
                   <th class="itemTh">削除</th>
                   <th class="itemTh">商品ID</th>
                   <th class="itemTh">商品名</th>
                   <th class="itemTh">単価</th>
                   <th class="itemTh">点数</th>
                   <th class="itemTh">小計</th>
               </tr>
               <c:forEach items="${listTable}" var="item" varStatus="status">
                   <tr>
                       <td class="itemTd"></td>
                       <td class="itemTd"><input type="radio" name="radiobutton" value="s_id"></td>
                       <td class="itemTd">${item.id}</td>
                       <td class="itemTd">${item.name}</td>
                       <td class="itemTd">${item.price}</td>
                       <td class="itemTd">${item.quantity}</td>
                       <td class="itemTd">${item.subtotal}</td>
                   </tr>
               </c:forEach>
           </table>
           <div>
               <span class="totalPrice">合計:${total}</span>
           </div>
       </div>
       <div class="deleteDecideBtn">
           <div>
               <input type="submit" name="delete" value="削除" />
               <input type="submit" name="decide" value="確定" />
           </div>
       </div>
   </form:form>
</body>
</html>
### 補足情報(FW/ツールのバージョンなど)
Version: Mars.2 Release(4.5.2)
どうぞよろしくお願いいたします。
  • Java

    17757 questions

    Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

  • HTML

    13872 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Spring

    988 questions

    Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

  • Eclipse

    2173 questions

    Eclipseは、IBM社で開発された統合開発環境のひとつです。2001年11月にオープンソース化されました。 たくさんのプラグインがあり自由に機能を追加をすることができるため、開発ツールにおける共通プラットフォームとして位置づけられています。 Eclipse自体は、Javaで実装されています。

  • JSP

    1174 questions

    JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る