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

質問

お世話になっています。プログラミング初心者です。
テーブルを動的に作成しながら、オブジェクトを配置していく過程につまづいてしまいました。

色々と試行錯誤した結果、テーブルは動的に作成できたのですが、その中に置きたいオブジェクトが動的に配置されません。
左のセルに項目名、右のセルにラジオボタンを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);
}

ソースも自信がありませんので、他に良い方法があれば例示して頂けると大変助かります。
稚拙な質問かと思いますが、ご教授宜しくお願いいたします。

回答No.3

HIRSYU · ベストアンサー

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

お礼

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

回答No.2

HIRSYU

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)は全く別物で処理する場所（クライアント側/サーバー側）も違いますので、そのあたりを整理するといいと思います。

補足

はい、まさにおっしゃる通りでした。

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を連番になるように配置していきたいのですが、なかなかよい方法がみつかりません・・・。

回答No.1

da-te

こんばんは。
※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>";

こんな感じでいかがでしょうか。

補足

素早いご回答ありがとうございました。
試してみたのですが、
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で作成されてしまうようです…。

もう少し自分でも模索してみようと思います。
もし他に方法がありそうでしたら、教えていただけると助かります。