はじめまして。
一覧を表示させて一覧の先頭の選択ボタンを押したした行の行番号の取得し、その行にシステム日付を表示させたいのですが、うまくいきません。
現在は、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で質問しましょう!
似たような質問が見つかりました
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- HTML・CSS 私の能力からして間違っていないような気がします。 4 2022/09/30 13:24
このQ&Aを見た人はこんなQ&Aも見ています
-
プロが教える店舗&オフィスのセキュリティ対策術
中・小規模の店舗やオフィスのセキュリティセキュリティ対策について、プロにどう対策すべきか 何を注意すべきかを教えていただきました!
-
クリックされたセルの位置を取得するには?
JavaScript
-
クリックされた罫表セルの行番号、列番号を取得するには
JavaScript
-
クリックしたラジオボタンの行番号を取得したい
JavaScript
-
-
4
至急!GetElementById でtdのidの値を取得、サブウインドに取得したデータを表示
JavaScript
-
5
チェックボックス付きのテーブルから、チェックの付いた行のみの値を取得したい
JavaScript
-
6
フォーム上で押されたボタンによってサーブレットの処理を変えたい
Java
-
7
javascriptで作成されたテーブルの値を取得したい
JavaScript
-
8
テーブルの任意の列を非表示にしたい
HTML・CSS
-
9
HTMLの値の渡し方について質問です。 HTMLで値を今の画面から次の画面に渡すにはどういう文を使う
HTML・CSS
-
10
tableの任意行にfocusをあてる
JavaScript
-
11
<input type=hidden" >で配列(複数の要素)を渡したいとき?"
PHP
-
12
プルダウン選択を変更すると、変更する前に戻るJavaScript
JavaScript
-
13
テーブルの項目の値取得
JavaScript
-
14
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
15
【JQuery】テーブルで行選択されているものの値を取得したい
JavaScript
-
16
JSPの処理の途中で、JavaScriptの処理をしたい
JavaScript
-
17
hiddenのvalueの値を変えたい
JavaScript
-
18
副問合せの書き方について
SQL Server
-
19
yyyymmddからyyyy/mm/ddへの変換
Java
-
20
特定<table>内の<td>の色を変える
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<td>の中のonClick="location" で
-
空のテーブルを表示させたい
-
ポップアップメニュー
-
JSで、テーブルのある行のみ、...
-
ウイルスバスターオンラインス...
-
Jquery on click 発火しない
-
月間予定表の作り方
-
【秀丸マクロ】検索行と、その...
-
ハイパーリンクを別ウインドウ...
-
PC情報の調べ方教えてください。
-
\\u30ad\\u30fc\\u30dc・・・と...
-
テーブルセルの列での背景色の変更
-
jquery datatablesを使用 イン...
-
「オブジェクトは、このプロパ...
-
JavaScriptでテーブルをクリッ...
-
CSVデータをツリー表示させたい
-
正規表現で複数マッチ条件で悩...
-
ボタン2回押しを無効にしたい
-
<form action="#">の意味とは?
-
JavaScriptにて動的に配列を作...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ハイパーリンクを別ウインドウ...
-
マウスをブラウザの外に出した...
-
JavaScriptで特定のtdタグにcla...
-
特定<table>内の<td>の色を変える
-
一覧から選択した行の行番号を...
-
tableの任意行にfocusをあてる
-
プルダウンで選択すると、DBの...
-
至急!GetElementById でtdの...
-
【UWSC】HTML内のある部分を抽...
-
javascript クリックすると、あ...
-
jsで質問です。 displayプロパ...
-
javascriptで質問です。 displa...
-
クリックされた罫表セルの行番...
-
テーブルの変数について
-
別ページからOnclickでテーブル...
-
スクロールバーの表示位置を変...
-
JavaScriptでテーブルをクリッ...
-
Selenium.ChromeDriverの使い方...
-
Excelで作ったhtmlファイルのサ...
-
チェックボックスにチェックが...
おすすめ情報