テーブルの動的作成&オブジェクト配置について

このQ&Aのポイント
  • プログラミング初心者ですが、テーブルを動的に作成しながらオブジェクトを配置する方法につまづいています。
  • テーブルは動的に作成できましたが、オブジェクトの配置がうまく行きません。
  • 具体的には、左のセルに項目名を、右のセルにラジオボタンを配置したいです。お手数ですが、どのように修正すれば良いか教えていただけますか?
回答を見る
  • ベストアンサー

テーブルの動的作成&オブジェクト配置

お世話になっています。プログラミング初心者です。 テーブルを動的に作成しながら、オブジェクトを配置していく過程につまづいてしまいました。 色々と試行錯誤した結果、テーブルは動的に作成できたのですが、その中に置きたいオブジェクトが動的に配置されません。 左のセルに項目名、右のセルにラジオボタンを2つ(1セット)を置きながら、全部で2列10行のテーブルを作成したいと考えています。 ・リクエストにname1,name2,name3…name10とセットされている値を順に左のセルに配置したい。 ・ラジオボタンのnameをname=radiobutton1,radiobutton2…radiobutton10と順に変えながら右のセルに配置したい。 具体例を述べますと、以下のソースの★の部分を動的に変えたいです(現状エラーのままです)。 仮にname0,name1にすると値は取れますので、セットはできているようです。 ■JSP //=================================================== //フォーム初期表示 // //=================================================== function initForm(targetForm){ targetForm = setForm(); //テーブルを作成する for(var i=0;i<10';i++){ var trgTbl = document.getElementById('tbl'); var colCnt = trgTbl.rows[0].cells.length; var rowCnt = trgTbl.rows.length; var newRow = trgTbl.insertRow(rowCnt); newRow.insertCell(0).innerText = '<%=(String)request.getAttribute("name"+i★) %>'; newRow.insertCell(1).innerHTML = "<p><input type='radio' name='radiobutton'+i★ value='1' >開始 <input type='radio' name='radiobutton'+i★ value='0'>停止</p>"; } ■サーブレットでセットしている箇所 for(int i =0; i<10 ; i++){ name = xml.getString("test("+i+").name"); select = xml.getString("test("+i+").change"); // リクエストにセット request.setAttribute("name"+i, name); request.setAttribute("radiobutton"+i, select); } ソースも自信がありませんので、他に良い方法があれば例示して頂けると大変助かります。 稚拙な質問かと思いますが、ご教授宜しくお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
  • HIRSYU
  • ベストアンサー率51% (45/87)
回答No.3

nameを連番にするなら、番号(i)がname内に入るように変更 "<p><input type='radio' name='radiobutton" + i + "' value='1' >開始 <input type='radio' name='radiobutton" + i + "' value='0'>停止</p>";

Mitsunari
質問者

お礼

教えて頂いた通りに書き直しましたら、期待通りのテーブルを作成することができました。 単純な書き方のミスでお恥ずかしい限りです。 この度はどうも有難うございました。

その他の回答 (2)

  • HIRSYU
  • ベストアンサー率51% (45/87)
回答No.2

JSPとJavaScriptが混合してしまってる気がするのですが・・・・ 動的にテーブルを組みたいってだけなら、JSP側だけで対応しちゃダメですか? <%=(String)request.getAttribute("name"+i★) %> ↑を見る限り、サーバー側でiをループしてる。 しかし、 function initForm(targetForm){ targetForm = setForm(); //テーブルを作成する for(var i=0;i<10';i++){ ↑を見る限り、iはクライアント側でループ? 私の思い違いなら申し訳ないんですが、JavaScriptとJava(JSP/Servlet)は全く別物で処理する場所(クライアント側/サーバー側)も違いますので、そのあたりを整理するといいと思います。

Mitsunari
質問者

補足

はい、まさにおっしゃる通りでした。 var array = new Array(); <% for (int i =0;i<num ;i++ ){%> array.push('<%=(String)request.getAttribute("name"+i) %>'); <%}%> //テーブル作成 for(var i=0;i<num ;i++){ var trgTbl = document.getElementById('tbl'); var colCnt = trgTbl.rows[0].cells.length; var rowCnt = trgTbl.rows.length; var newRow = trgTbl.insertRow(rowCnt); //セルに配置 newRow.insertCell(0).innerText = array[i]; newRow.insertCell(1).innerHTML = "<p><input type='radio' name='radiobutton'+i★ value='1' >開始 <input type='radio' name='radiobutton'+i★ value='0'>停止</p>"; のように、一度名前を配列に詰めてから順に出力することで、項目名の出力はできるようになりました。 アドバイスありがとうございます。 あとは、ラジオボタンのnameを連番になるように配置していきたいのですが、なかなかよい方法がみつかりません・・・。

  • da-te
  • ベストアンサー率37% (3/8)
回答No.1

こんばんは。 ※JSPコンパイル後を前提としてお答えします。 変更前と変更後を載せますね。 変更前 for(var i=0;i<10';i++){ 変更後 for(var i=1;i<=10;i++){ 変更前 newRow.insertCell(0).innerText = '<%=(String)request.getAttribute("name"+i★) %>'; newRow.insertCell(1).innerHTML = "<p><input type='radio' name='radiobutton'+i★ value='1' >開始 <input type='radio' name='radiobutton'+i★ value='0'>停止</p>"; 変更後 newRow.insertCell(0).innerText = '<%=(String)request.getAttribute("name"'+i+') %>'; newRow.insertCell(1).innerHTML = "<p><input type='radio' name='radiobutton'"+i+" value='1' >開始 <input type='radio' name='radiobutton'"+i+" value='0'>停止</p>"; こんな感じでいかがでしょうか。

Mitsunari
質問者

補足

素早いご回答ありがとうございました。 試してみたのですが、 newRow.insertCell(0).innerText = '<%=(String)request.getAttribute("name"'+i+') %>'; でコンパイルエラー。 newRow.insertCell(1).innerHTML = "<p><input type='radio' name='radiobutton'"+i+" value='1' >開始 <input type='radio' name='radiobutton'"+i+" value='0'>停止 はnameがすべてradiobuttonで作成されてしまうようです…。 もう少し自分でも模索してみようと思います。 もし他に方法がありそうでしたら、教えていただけると助かります。

関連するQ&A

  • javascriptで作成されたテーブルの値を取得したい

    javascriptで作成されたテーブルの値を取得したいです。 具体的には、最初に作成するテーブルの大きさを入力するフォームがあり、 ボタンを押すと、そこに入力された値によってテーブルが作成され、 さらに、そこにデータを入力して、また次のボタンを押せば テーブルに入力された値を取得できるようにしたいです。 最初のテーブルの大きさを入力するフォームと、テーブルを作成することはできたのですが、そこから入力された値を取得する方法が分からず、困っています。 そのプログラムはこんな感じです。 分かる方いらっしゃいましたら、お知恵をお貸しください。 よろしくお願いします。 <html> <head> <title>テスト</title> </head> <body> <form name="myForm"> <p>mac.itemを半角数字で入力してください</p> mac <input type="text" size="10" name="myFormKK"> item <input type="text" size="10" name="myFormI"> <input type="button" value="OK" onclick="addAll()"> </form> <br> <p>処理量 段取り時間 段取り費 梯状在庫保管費を入力</p> <form name="fpsck" method="post" enctype="text/plain" action=""> <TABLE BORDER="1" id="Table2"> </TABLE> </form> <script type="text/javascript"> //3行目以降 開始 <!-- function add3rd(){ var tbl = document.getElementById("Table2").firstChild; if (!tbl.tagName) { tbl = document.getElementById("Table2"); } kk = eval(document.myForm.myFormKK.value)-1; it = eval(document.myForm.myFormI.value)-1; for(j=0;j<=it;j++){ var tr = document.createElement("tr"); for(i=0;i<=kk*3+6;i++){ var td1 = document.createElement("td"); var tx1 = document.createElement("input"); tx1.setAttribute("type","text"); tx1.setAttribute("size","8"); tx1.setAttribute("maxlength","18"); tx1.setAttribute("name","psck"); if(i == 0){ itN = j + 1; itName = "item" +itN; tx1.setAttribute("value",itName); tx1.setAttribute("disabled","disabled"); } else{ tx1.setAttribute("value","0"); } td1.appendChild(tx1); tr.appendChild(td1); } tbl.appendChild(tr); }} //3行目以降 終了 // --> </script> <script type="text/javascript"> //すべての関数実行 <!-- function addAll(){ add3rd(); } // --> </script> </body> </html>

  • innerHTMLでのテーブル作成

    いつもお世話になっております。 こちらの質問と回答を参考にプログラムを付け足して、リストを作る練習をしています。 http://okwave.jp/qa/q8090793.html テーブル行の先頭に項目名を表示させて、表を分かりやすくしようと思ったのですが、 最後に出力される項目名がそれまでの項目名を上書きしてしまい、 項目名が1個しか表示されないため、テーブルがずれて表示されてしまいます。 50個 金額~~ 100個 金額~~ と表示させるためには、どこを手直ししたら良いのか知恵を貸してください。 よろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>innnerHTMLで自動生成された表を出力したい</title> <style> h2 { margin-bottom:0; color:#900;} table{ border:none; font-size:12px;} table tr th{ padding:5px; width:90px; background:#69F;} table tr td{ padding:5px; text-align:right; background:#9CF;} </style> <script type="text/javascript"> //ラジオボタンのvalue値を取得 var daysRate; var nouki = document.getElementsByName('nouki'); var price = new Array ( 10, 30, 50 ); function getRate() { for ( var i = 0; i < nouki.length; i ++ ) { if ( nouki[i].checked ) { daysRate = nouki[i].value; }}return parseFloat(daysRate);} function calc() { // 選択されているレートを取得 var rate = getRate(); var list_name = new Array('<h2>表1</h2>','<h2>表2</h2>','<h2>表3</h2'); var table_start = "<div><table><tbody>"; var table_head = '<tr><th>入数</th><th>ヘッダー1</th><th>ヘッダー2</th><th>ヘッダー3</th></tr>'; var table_kosuu = ""; var table_td = ""; var table_end = "</tbody></table></div><hr />"; // priceが増えてもロジックをいじる必要がないようにprice.lengthでループ数を制御 for(var i=50; i<=100; i+=50){ if(i==50){ table_kosuu = '<tr><td>' + i + '個</td>'; for ( var j = 0; j < price.length; j ++ ) { if(j < price.length-1){ table_td += '<td>¥' + parseInt(price[j]*i) * rate + '</td>'; } else { table_td += '<td>¥' + parseInt(price[j]*i) * rate + '</td></tr>'; } } } if(i==100){ table_kosuu = '<tr><td>' + i + '個</td>'; for ( var j = 0; j < price.length; j ++ ) { if(j < price.length-1){ table_td += '<td>¥' + parseInt(price[j]*i) * rate + '</td>'; } else { table_td += '<td>¥' + parseInt(price[j]*i) * rate + '</td></tr>'; } } } document.getElementById('priceTableOutput').innerHTML = list_name[0] + table_start + table_head + table_kosuu + table_td; + table_end; } } window.onload = function() { // 読込み後も一度テーブル表示を実行する calc(); } </script> </head> <body> 再計算ボタンを押すと価格表が再計算されます。<br /> <input type="radio" name="nouki" value="1" checked="checked" />通常配達 <input type="radio" name="nouki" value="1.25" />翌日配達 <input type="radio" name="nouki" value="1.5" />当日配達 <input type="button" value="再計算" onClick="calc()"> <div id="priceTableOutput">innerHTMLで、ここに表を出力</div> <br /> </body> </html>

  • scriptに関して

    scriptで下記のようにcheckboxと削除ボタンを作りました。 checkをした行を削除ボタンで削除をしたいのですが、 今のソースの状態では、checkboxを押した瞬間に行が消えます。 どこの書き方がいけないのでしょうか? <scriptソース> function AddTableRows1(){ var table1 = document.getElementById("table1"); var row1 = table1.insertRow(table1.rows.length); var cell1 = row1.insertCell(0); var cell2 = row1.insertCell(1); var cell3 = row1.insertCell(2); cell1.setAttribute("class","name"); cell2.setAttribute("class","naiyo"); cell3.setAttribute("class","zyoukyou"); var HTML1 = '<input type="checkbox" onclick="remove_row(this)"><input name="gyoumuname" ID="gyoumuname" type="text" ><input type="hidden" name="gyoumuno" Id="gyoumuno" value="0">'; var HTML2 = '<textarea name="gyoumunaiyo" ID="gyoumunaiyo" Style="width:50em;height:5em"></textarea>'; var HTML3 = '<input name="gyoumuzyoukyou" ID="gyoumuzyoukyou" >'; cell1.innerHTML = HTML1; cell2.innerHTML = HTML2; cell3.innerHTML = HTML3; } function remove_row(o){ var TR = o.parentNode.parentNode; TR.parentNode.deleteRow(TR.sectionRowIndex); } <ボタンソース> <input class="btn1" type="button" value="削除" onclick="remove_row(this)">

  • フォームからテーブルへの転記

    下記はフォームに入力した項目をテーブルに転記するコードです。 Private Sub CommandButton1_Click() Dim ws As Worksheet Dim tbl As ListObject Dim newRow As ListRow Dim lastRow As Long Dim i As Long Set ws = Worksheets("シート1") Set tbl = ws.ListObjects("テーブル") ' Find the last row in the table lastRow = tbl.ListRows.Count + 1 ' Add a new row to the table Set newRow = tbl.ListRows.Add(lastRow) ' Add the data to the new row newRow.Range.Cells(1, 1).Value = tbl.ListRows.Count For i = 1 To 7 newRow.Range.Cells(1, i + 1).Value = Me.Controls("TextBox" & i).Value Next i ' Clear the form For i = 1 To 7 Me.Controls("TextBox" & i).Value = "" Next i Sheets("シート1").Select ActiveWorkbook.Save Unload フォーム1 End Sub このコードを実行した時に、最初のセルには、テーブルでの行番号が挿入されますが(1から始まる)挿入される番号を、23300から始めるにはどうしたらいいでしょうか?(23300+行番号)

  • scriptとJSPについて質問です。

    scriptとJSPについて質問です。 現在は下記のソースのように追加ボタンを押すことで、 テキストボックスがどんどん追加されていきます。最上行削除ボタンで一番上のテキストボックスは消せます。 最下行削除ボタンで一番下のテキストボックスは消せます。 この削除の仕様が悪くて、 追加された全てのテキストボックスの前にチェックボックスを入れて、 チェックしたもののみを削除ボタンで消すようにしたいです。 どのようにソースを書くのかをご教示いただきたいです。 「現在のscriptソース」 function AddTableRows1(){ var counter = 0; counter++; var table1 = document.getElementById("table1"); var row1 = table1.insertRow(counter); var cell1 = row1.insertCell(0); var cell2 = row1.insertCell(1); var cell3 = row1.insertCell(2); cell1.setAttribute("class","name"); cell2.setAttribute("class","naiyo"); cell3.setAttribute("class","zyoukyou"); var HTML1 = '<input name="gyoumuname" ID="gyoumuname" type="text" name="width:100em;height:10em">'; var HTML2 = '<textarea name="gyoumunaiyo" ID="gyoumunaiyo" Style="width:50em;height:5em"></textarea>'; var HTML3 = '<input name="gyoumuzyoukyou" ID="gyoumuzyoukyou" type="text" name="width:100em;height:10em">'; cell1.innerHTML = HTML1; cell2.innerHTML = HTML2; cell3.innerHTML = HTML3; } function DelTalbeFirstRow1(){ var table1 = document.getElementById("table1"); if(table1.rows.length > 1){ table1.deleteRow(1); } } function DelTalbeLastRow1(){ var table1 = document.getElementById("table1"); if(table1.rows.length > 1){ table1.deleteRow(table1.rows.length-1); } } 「JSPソース」 <tr> <th>タイトル</th><th>内容</th><th>状況</th> </tr> </table> <input type="button" value="追加" onClick="AddTableRows1();" /> <input type="button" value="最上行削除" onclick="DelTalbeFirstRow1();" /> <input class="btn1" type="button" value="最下行削除" onclick="DelTalbeLastRow1();" />

  • ラジオボタンの選択肢をサーブレットで取得するには?

    サーブレットの開発を行っていますが、ブラウザー側で ラジオボタンを選択した際に何を選択したかのデータを取得したいのです。 (下記のHTMLで言えば、割引手形か、手形貸付か、証書貸付というのを取得したいのです) パラメーターをサーブレットで受け取りたいのですが うまくいきません HTMLでHIDDENを使用するとか聞いたことはあるのですがどのようにコーディングすればいいんでしょうか? よろしくお願いいたします。 <p> <input type="radio" name="radiobutton" value="radiobutton"> 割引手形  <input type="radio" name="radiobutton" value="radiobutton"> 手形貸付  <input type="radio" name="radiobutton" value="radiobutton"> 証書貸付 </p> ブラウザー側からは <form action="http://localhost/servlet/yuushi" method=post> の指定を行っています。 サーブレットでの受け取り方を、 String p2=request.getParameter("radiobutton");  とすると、p2=radiobuttonとデータがセットされました。

    • ベストアンサー
    • Java
  • requestの値が削除されません…

    requestの値を削除したいのですが、全く削除出来ません。 ソースは Enumeration parameterNames = request.getParameterNames(); while( parameterNames.hasMoreElements() ) { // パラメータ名取得 String name = (String)(parameterNames.nextElement()); /* 値列挙 */ String[] valueList = request.getParameterValues(name); /* パラメータ値列挙 */ for ( int i = 0 ; i < valueList.length ; i++ ) { // 値を削除 request.removeAttribute(name); } } です。 試しに request.setAttribute(name,"***"); で値をセットし、 request.removeAttribute(name); (または、request.setAttribute(name,null);) でnameを特定のパラメータで、やってみて、 request.getAttribute(name); で確認したところ、値は削除されました。 値のセットの仕方が問題なのでしょうか?? 環境は、 JDK1.3.1 oc4j1.0.2.2.1 です。 どうすれば、requestの値を削除出来るのか、ご教授お願いしますm(_ _)m

    • ベストアンサー
    • Java
  • オブジェクトを指定しても「Nullまたはオブジェクトではありません」となってしまう

    Webページ作成にて、セレクトボックスを選択した時に選択内容によって、 同フォーム内にある特定のラジオボタンを無効にする処理を組んでいます。 セレクトボックスの[onChange]イベントに下記の[selectChange()]が 動くように記述しているのですが、どうしても 「Nullまたはオブジェクトではありません」とエラーとなってしまいます。 オブジェクト名のタイプミスなども含め何度も見直しましたが間違いありませんでした。 ちなみに、この関数と同じ場所に、ロールオーバーイメージをプリロード させる関数も記述しているのですがそちらは問題なく動いています。 (DreamWeaverが生成してくれるものですが・・) 原因として何が考えられるでしょうか。 分かる方お力をお貸し下さい。 //特定のラジオボタンを無効にする関数 function selectChange() { var selectedNum = document.FormName.SelectBox.selectedIndex; if(selectedNum == 1) { document.FormName.RadioButton[0].disabled = false; document.FormName.RadioButton[3].disabled = true; document.FormName.RadioButton[4].disabled = true; } else if(selectedNum >= 2){ document.FormName.RadioButton[0].disabled = true; document.FormName.RadioButton[3].disabled = false; document.FormName.RadioButton[4].disabled = false; } } //セレクトボックスの記述 <select name="SelectBox" onchange="selectChange()"> <option value=""></option> <option value=1>1</option> <option value=2>2</option> <option value=3>3</option> </select>

  • オブジェクトの中のプロパティを認識できません

    javax.el.PropertyNotFoundException: Property 'id' not found on type java.lang.Stringをいうアラームが消えません。 どなたか<c:out value="${var5.id}"/>を表示する方法を教えて下さい。 「hoge.jsp」 <%@ page language="java" contentType="text/html; charset=Windows-31J" pageEncoding="Windows-31J" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <c:if test="${itemSize != 0}"> <table border="0" > <c:forEach var="var5" items="table"> <tr> <td width="30" ><c:out value="${var5.id}"/></td> <td width="210"><c:out value="${var5.name}"/></td> <td width="50" ><c:out value="${var5.price}"/></td> <td width="50" ><input type="text" name="count" value="1" size="3"/></td> </tr> </c:forEach> </table> 「hoge.java」 public class hoge extends HttpServlet{ private static final long serialVersionUID = 1L; public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("Windows-31J"); int id = 0; String name = null; int price = 0; try{ table3 = new ArrayList<Object>(); id = Integer.parseInt(request.getParameter("id")); name = request.getParameter("name"); price = Integer.parseInt(request.getParameter("price")); hogeBean hoge = new hogeBean(); hoge.setId(id); hoge.setName(name); hoge.setPrice(price); table3.add(hoge); request.getSession().setAttribute("table", table3); }catch(Exception e){ throw new ServletException(e); } getServletContext().getRequestDispatcher("/hoge.jsp").forward(request,response); } private List<Object> table3; public List<Object> getTable3() { return table3; } } 「hogeBean.java」 public class hogeBean{ private int id; public int getId(){ return id; } private String name; public String getName(){ return name; } public void setName(String name){ this.name = name; } public void setId(int id){ this.id = id; } private int price; public int getPrice(){ return price; } public void setPrice(int price){ this.price = price; } }

    • ベストアンサー
    • Java
  • テーブルの行削除について

    以前、テーブルの行追加について教えてもらい出来ましたが 逆に、追加された行を削除する方法を教えてください。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS"> <TITLE>行追加・削除</TITLE> </HEAD> <BODY> <TABLE BORDER="1" id="Table1"> <TR> <TH>タイトルA</TH> <TH>タイトルB</TH> </TR> <TR> <TD><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="A" VALUE=""></TD> <TD><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="B" VALUE=""></TD> </TR> </TABLE> <INPUT TYPE="button" VALUE="行追加" onclick="addRow()"> <INPUT TYPE="button" VALUE="行削除"> <script language="JavaScript"> function addRow() { var tbl = document.getElementById("Table1").firstChild; if (!tbl.tagName) { tbl = document.getElementById("Table1"); } var tr = document.createElement("tr"); var td1 = document.createElement("td"); var tx1 = document.createElement("input"); tx1.setAttribute("type","text"); tx1.setAttribute("size","18"); tx1.setAttribute("maxlength","18"); tx1.setAttribute("name","Cn"); tx1.setAttribute("value",""); td1.appendChild(tx1); var td2 = document.createElement("td"); var tx2 = document.createElement("input"); tx2.setAttribute("type","text"); tx2.setAttribute("size","18"); tx2.setAttribute("maxlength","18"); tx2.setAttribute("name","Cn"); tx2.setAttribute("value",""); td2.appendChild(tx2); tr.appendChild(td1); tr.appendChild(td2); tbl.appendChild(tr); } </script> </BODY> </HTML>

専門家に質問してみよう