
はじめまして。
一覧を表示させて一覧の先頭の選択ボタンを押したした行の行番号の取得し、その行にシステム日付を表示させたいのですが、うまくいきません。
現在は、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>

No.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では一番左のセルに格納されます。(ボタンは消えます)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
クリックされたセルの位置を取得するには?
JavaScript
-
画面表示とともにtableの指定の行位置を表示
JavaScript
-
クリックされた罫表セルの行番号、列番号を取得するには
JavaScript
-
-
4
テーブルの任意の列を非表示にしたい
HTML・CSS
-
5
Statement ignored というエラー
Oracle
-
6
tableタグとformタグの組み合わせ
HTML・CSS
-
7
特定<table>内の<td>の色を変える
JavaScript
-
8
リクエストに応じたselectedの初期値設定方法
Java
-
9
チェックボックス付きのテーブルから、チェックの付いた行のみの値を取得したい
JavaScript
-
10
クリックしたラジオボタンの行番号を取得したい
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウンで選択すると、DBの...
-
JavaScriptで特定のtdタグにcla...
-
特定<table>内の<td>の色を変える
-
ハイパーリンクを別ウインドウ...
-
jQueryのプラグイン「Tablesort...
-
javascriptでボタンを押すたび...
-
【JQuery】テーブルで行選択さ...
-
カレンダーの年月日の横に翌月...
-
javascript クリックすると、あ...
-
一覧から選択した行の行番号を...
-
至急!GetElementById でtdの...
-
スクロールバーの表示位置を変...
-
テーブルの項目の値取得
-
クリックされた罫表セルの行番...
-
return trueとreturn falseの用...
-
hiddenのvalueの値を変えたい
-
<JavaScript>tableタグを入力不...
-
onchangeイベントを強制的に発...
-
CSVファイルを読みこみ、プルダ...
-
<input>の選択肢をプルダウンメ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウンで選択すると、DBの...
-
ハイパーリンクを別ウインドウ...
-
tableの任意行にfocusをあてる
-
特定<table>内の<td>の色を変える
-
一覧から選択した行の行番号を...
-
CSVデータをツリー表示させたい
-
テーブルの項目の値取得
-
JavaScriptでテーブルをクリッ...
-
至急!GetElementById でtdの...
-
jspでのArrayListの値の表示
-
JavaScriptで特定のtdタグにcla...
-
javascript クリックすると、あ...
-
ビンゴゲームの作成
-
【UWSC】HTML内のある部分を抽...
-
チェックボックスにチェックが...
-
まとめてセルの色を変えたい
-
クリックされた罫表セルの行番...
-
指定した要素を含んだテキスト...
-
VBScriptの繰り返し文について
-
テーブル内に表示されている数...
おすすめ情報