教えて! goo のコンテンツに対する取り組みについて

はじめまして。
一覧を表示させて一覧の先頭の選択ボタンを押したした行の行番号の取得し、その行にシステム日付を表示させたいのですが、うまくいきません。
現在は、btn_selectにalertを入れて選択した行の番号が取得できたかどうか確認したところ、取得できず%{#stat.index}が出力されてしまいます。
どのようにすればボタンを押した行の行番号の取得及びその行のある項目にシステム日付を表示させることができますか?。
宜しくお願いします。

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ page pageEncoding="Windows-31J" %>
<%@taglib prefix="s" uri="/struts-tags" %>
<%@taglib prefix="original" uri="/original-tags" %>
<%@taglib prefix="originalLY" uri="/original-LY-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="html-head.jsp" %>
<script type="text/javascript">
function btn_select(indx) {
alert (indx);
}
</script>
</head>
<body>
<%@ include file="HeaderTitle.jsp" %>
<s:form>
<table class="table_line" >
<tr>
<th rowspan=2 class="form_title_list" >選択</th>
<th rowspan=2 class="form_title_list" >A</th>
<th rowspan=2 class="form_title_list" >B</th>
<th rowspan=2 class="form_title_list" >C</th>
<th colspan=2 class="form_title_list" >D</th>
</tr>
<s:iterator value="shinchokuList" status="stat">
<tr>
<s:if test="%{#stat.index % 2 == 0}">
<td class="table_list1"><input type="button" value="選択" name="button"
onclick="btn_select(%{#stat.index});"/></td>
<td class="table_list1" ><s:textfield name="List[%{#stat.index}].A" size="10" maxlength="10" readonly="true" /></td>
<td class="table_list1" ><s:textfield name="sist[%{#stat.index}].B" size="63" maxlength="63" readonly="true" /></td>
<td class="table_list1" ><s:textfield name="List[%{#stat.index}].C" size="5" maxlength="5" readonly="true" /></td>
<td class="table_list1" ><s:textfield name="List[%{#stat.index}].D" size="10" maxlength="10" readonly="true" /></td>
<td class="table_list1" ><s:textfield name="List[%{#stat.index}].E" size="10" maxlength="10" readonly="false" cssStyle="%{eErr}"/></td>
</s:if>
</s:else>
</s:iterator>
</table>
</td>
</tr>
</table>
</s:form>
</body>
<html>

gooドクター

A 回答 (1件)

まず、目的の


「一覧を表示させて一覧の先頭の選択ボタンを押したした行の行番号の取得し、その行にシステム日付を表示させたい」
の達成方法についてですが、
行番号を取得する必要はありません。

次に質問内容についてですが、

(1)行番号の取得方法
TRタグのエレメントには、rowIndexというプロパティが用意されています。
それを用いれば行番号を取得できます。
方法としましては、ボタンのINPUTタグから親の親のTRタグを参照します。

具体例を下記に示します。
適当にテキストエディタにコピペして動きを確認してみてください。
**********
<html>
<head><title>rowIndex test</title></head>
<body>
<table border="1" bordercolor="red">
<tr>
<td>
<input type="button" value="zero" onclick="alert(this.parentNode.parentNode.rowIndex)">
</td>
</tr>
<tr>
<td>
<input type="button" value="one" onclick="alert(this.parentNode.parentNode.rowIndex)">
</td>
</tr>
</table>
</body>
</html>
**********

alertの中身についての説明を少々致します。
this・・・INPUTタグ自身をさす。
this.parentNode・・・INPUTタグの親のタグの、TDタグをさす。
this.parentNode.parentNode・・・INPUTタグの親の親のタグの、TRタグをさす。


(2)ボタンが押された行ある項目にシステム日付を表示する方法
こちらの質問に関しましては
上記(1)を一部利用します。
TRタグから対象となるTDタグを参照します。

具体例
**********
<html>
<head>
<title>rowIndex test</title>
<script type="text/javascript">
<!--
today=new Date();
y=today.getFullYear();
m=today.getMonth()+1;
d=today.getDate();

function insertToday(inputElement){
inputElement.parentNode.parentNode.childNodes[1].innerHTML=y+"/"+m+"/"+d;
}
//-->
</script>
</head>
<body>
<table border="1" bordercolor="red">
<tr>
<td style="width:100px">
<input type="button" value="zero" onclick="insertToday(this)">
</td>
<td style="width:100px"></td>
</tr>
<tr>
<td style="width:100px">
<input type="button" value="one" onclick="insertToday(this)">
</td>
<td style="width:100px"></td>
</tr>
</table>
</body>
</html>
**********

少々説明を致します。
childNode[n]・・・そのタグのn番目の子のタグを参照します。
nは、IEでは0から、Firefoxでは1からです。
このソースではchildNodes[1]となっているため、IEでは左から2セル目に格納されます。
Firefoxでは一番左のセルに格納されます。(ボタンは消えます)
    • good
    • 0
この回答へのお礼

丁寧な説明ありがとうございました。
明日早速教えていただいた通り確認させて頂きます。

お礼日時:2009/02/16 23:09

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

gooドクター

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング