- PR -

Strutsでjavascript使用

1
投稿者投稿内容
Middle
会議室デビュー日: 2007/06/19
投稿数: 3
投稿日時: 2007-06-23 18:32
表(生成される表の数は不定)の中のラジオボタンにJavaScriptで処理を
いれたいのですがStrutsタグの書き方がわかりません。

JavaScriptの処理はラジオボタンが選択されたら同じテーブル内の
テキストフィールドを非活性にするというものです。

生成される表の数が不定なので、どの表のラジオボタンが選択されたのかを
JavaScriptで判断して活性非活性処理を行わせたいのですが、<html:radio>
タグのどの属性にユニークな値を入れたらいいのかわかりません。

よろしくお願いします。
Middle
会議室デビュー日: 2007/06/19
投稿数: 3
投稿日時: 2007-06-24 03:59
自己解決しました。
settergetterメソッドで扱う変数が配列じゃないと
実現できないんですかね？
コードを書きます。
ほかにいいアイデアあったら教えてください。

-------------------jsp--------------------------------------------------
<%@ page contentType="text/html; charset=Windows-31J" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>

<script language="JavaScript">
<!-----
function radioChk() {
var tableElements = document.getElementsByTagName("table");
var inputElements;
var text = ".text";
var textElement;
var radioElement;

for (i = 0; i < tableElements.length; i++) {
inputElements = tableElements[i].getElementsByTagName("input");
for (k = 0; k < inputElements.length; k++) {
if (inputElements[k].type == "radio") {
radioElement = document.getElementsByName(inputElements[k].name);
textName = inputElements[k].name.substring(0, 4) + text;
textElement = document.getElementsByName(textName);
if (radioElement[0].checked == true) {
textElement[0].disabled = false;
textElement[0].style.backgroundColor="";
} else if (radioElement[1].checked == true) {
//textElementは配列じゃなきゃできなかった
textElement[0].disabled = true;
textElement[0].style.backgroundColor="#d4d0c8";
}
}
}
}
}
//----->
</script>


<html:html>
<head><title>処理画面</title>
<body>
<html:form action="/success">
Mr....<bean:write name="loginForm" property="name" />

<html:submit value="実行" />

<logic:iterate id="T" name="Table" indexId="idx" type="jp.co.itboost.struts.bean.Table">
<br />
<bean:write name="T" property="caption" />
<table border="1">
<tr>
<th>表示有無</th>
<td>
<html:radio onclick="radioChk()" name="T" property="radio" indexed="true" value='<%="table" + idx + "活性" %>' />活性
<html:radio onclick="radioChk()" name="T" property="radio" indexed="true" value='<%="table" + idx + "非活性" %>' />非活性
</td>
<td><html:text name="T" property="text" indexed="true" value='<%="table" + idx %>' /></td>
</tr>
<logic:iterate id="Tdata" name="T" property="tabledata" type="jp.co.itboost.struts.bean.TableData">
<tr>
<th><bean:write name="Tdata" property="th" /></th>
<td><bean:write name="Tdata" property="td1" /></td>
<td><bean:write name="Tdata" property="td2" /></td>
<td><bean:write name="Tdata" property="td3" /></td>
<td><bean:write name="Tdata" property="td4" /></td>
<td><bean:write name="Tdata" property="td5" /></td>
<td><bean:write name="Tdata" property="td6" /></td>
</tr>
</logic:iterate>
</table>
<br />
</logic:iterate>

</html:form>
</body>
</head>
</html:html>

------------------------bean1-------------------------------------

package jp.co.itboost.struts.bean;

public class TableData {

private String th;
private String td1;
private String td2;
private String td3;
private String td4;
private String td5;
private String td6;

public String getTd1() {
return td1;
}
public void setTd1(String td1) {
this.td1 = td1;
}
public String getTd2() {
return td2;
}
public void setTd2(String td2) {
this.td2 = td2;
}
public String getTd3() {
return td3;
}
public void setTd3(String td3) {
this.td3 = td3;
}
public String getTd4() {
return td4;
}
public void setTd4(String td4) {
this.td4 = td4;
}
public String getTd5() {
return td5;
}
public void setTd5(String td5) {
this.td5 = td5;
}
public String getTd6() {
return td6;
}
public void setTd6(String td6) {
this.td6 = td6;
}
public String getTh() {
return th;
}
public void setTh(String th) {
this.th = th;
}
}

-------------------------bean2-----------------------------------

package jp.co.itboost.struts.bean;

import java.util.List;

public class Table {

private List tabledata;
private String caption;
private String[] radio;
private String[] text;

public String[] getText() {
return text;
}

public void setText(String[] text) {
this.text = text;
}

public String[] getRadio() {
return radio;
}

public void setRadio(String[] radio) {
this.radio = radio;
}

public String getCaption() {
return caption;
}

public void setCaption(String caption) {
this.caption = caption;
}

public List getTabledata() {
return tabledata;
}

public void setTabledata(List tabledata) {
this.tabledata = tabledata;
}
}

------------------作られるHTML一部----------------------------------
<br />
テーブル0
<table border="1">
<tr>
<th>表示有無</th>
<td>
<input type="radio" name="T[0].radio" value="table0活性" onclick="radioChk()">活性
<input type="radio" name="T[0].radio" value="table0非活性" onclick="radioChk()">非活性
</td>
<td><input type="text" name="T[0].text" value="table0"></td>
</tr>

<br />
テーブル1
<table border="1">
<tr>
<th>表示有無</th>
<td>
<input type="radio" name="T[1].radio" value="table1活性" onclick="radioChk()">活性
<input type="radio" name="T[1].radio" value="table1非活性" onclick="radioChk()">非活性
</td>
<td><input type="text" name="T[1].text" value="table1"></td>
</tr>

Middle
会議室デビュー日: 2007/06/19
投稿数: 3
投稿日時: 2007-06-24 20:04
radioChkに"this"が渡せるんだね
シンプルになった。

<script language="JavaScript">
<!-----
function radioChk(chkOBJ) {
var text = ".text";
var textElement;
var radioElement;

radioElement = document.getElementsByName(chkOBJ.name);

textName = chkOBJ.name.substring(0, 4) + text;
textElement = document.getElementsByName(textName);

if (radioElement[0].checked == true) {
//textElementは配列0のプロパティに変更をかけなきゃ実現できなかった
textElement[0].disabled = false;
textElement[0].style.backgroundColor = "";
} else if (radioElement[1].checked == true) {
//textElementは配列0のプロパティに変更をかけなきゃ実現できなかった
textElement[0].disabled = true;
textElement[0].style.backgroundColor = "#d4d0c8";
}
}
//----->
</script>
1

スキルアップ／キャリアアップ（JOB@IT）