一覧から選択した行の行番号を取得について
- 一覧画面で選択ボタンを押した行の行番号を取得する方法について質問です。現在はalertを使用して行番号を確認していますが、うまく取得できません。どのようにすれば選択した行の行番号を取得できるでしょうか。
- また、取得した行番号に対応する行のある項目にシステム日付を表示させたいです。具体的な方法を教えていただけますか。
- お手数ですが、よろしくお願いします。
- ベストアンサー
一覧から選択した行の行番号を取得について
はじめまして。 一覧を表示させて一覧の先頭の選択ボタンを押したした行の行番号の取得し、その行にシステム日付を表示させたいのですが、うまくいきません。 現在は、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>
- kouchan_s
- お礼率69% (9/13)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （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では左から２セル目に格納されます。 Firefoxでは一番左のセルに格納されます。（ボタンは消えます）
関連するQ&A
- ラジオボタン選択でtextfieldをアクティブにするには？
■下記サンプルソースのラジオボタン「はい」を選択するとtextfieldがアクティブになるJavaScriptがわからず困っております。教えて頂けないでしょうか。 （ページ開いた際は「いいえ checked」でtextfieldはグレーで入力無効） 可能であればシンプルなソースで「最新のWinIE、MacSafari」に対応していると非常に助かります。先輩方よろしくお願いします。 <form name="form1" method="post" action=""> <table> <tr> <td>■「はい」を選択すると、textfield（カテゴリー1～4）がアクティブになる</td> </tr> <tr> <td> <input name="radiobutton" type="radio" value="radiobutton">はい <input name="radiobutton" type="radio" value="radiobutton" checked>いいえ </td> </tr> <tr> <td> カテゴリー1<input name="textfield" type="text" size="30" maxlength="30"> <br> カテゴリー2 <input name="textfield22" type="text" size="30" maxlength="30"> <br> カテゴリー3 <input name="textfield32" type="text" size="30" maxlength="30"> <br> カテゴリー4 <input name="textfield42" type="text" size="30" maxlength="30"> </td> </tr> </table> </form>
- ベストアンサー
- JavaScript
- <s:iterator>の値をリストで取得したい
Struts2です。 リストの取得の仕方で困っています。 特定の条件で検索をかけ、jspに表示された結果を一部textfieldで<s:iterator>のリスト表示し、その中身を変更して更新ボタンを押すと、DBのデータを更新する、という流れです。 jspは以下のようになっています。(一部抜粋) <table border="1"> <s:iterator status="st" value="projectList"> <tr> <td><s:checkbox id="isChecked" name="isChecked" /></td> <td><s:property value="projno"/></td> <td><s:textfield id="projname" name="projname" maxlength="24" size="52" /></td> <td><s:select id="deptno" name="deptno" list="departmentList" value="%{deptno}" listKey="deptno" listValue="deptno" /></td> <td><s:textfield id="respemp" name="respemp" maxlength="6" size="12" /></td> <td><s:textfield id="prstaff" name="prstaff" maxlength="6" size="12" /></td> <td><s:textfield id="prstdate" name="prstdate" maxlength="8" size="12" /></td> <td><s:textfield id="prendate" name="prendate" maxlength="8" size="12" /></td> <td><s:textfield id="majproj" name="majproj" maxlength="6" size="12" /></td> </tr> </s:iterator> </table> <s:property value="listSize"/>件 <s:form > <table> <tr> <td><s:textfield label="プロジェクトNo" id="projno" name="projno" size="8" maxlength="6" /></td> </tr> </table> <table> <tr> <s:submit action="search103R" value="一覧検索" onclick="return search_fnc()" /> <s:submit action="modify103R" value="一覧更新" onclick="return modify_fnc()" /> <s:submit action="jumpStruts2" method="jump103R3" value="登録画面" /> <s:property value="replyMsg" /> <s:hidden value="%{projno}" /> </tr> <s:actionerror /> </table> </s:form> javaのロジックは、以下のようになっています。引数に入れられた項目で更新する、という処理です。 // 更新処理 public void modify(String projno, String projname, String deptno, String respemp, String prstaff, String prstdate, String prendate, String majproj) throws SQLException, IOException { // SQLプロパティファイル読み込み sqlConf = DevLearningUtils.loadProperties("sql"); // SQL文 UPDATE PROJECT SET PROJNAME = ?, DEPTNO = ?, RESPEMP = ?, PRSTAFF = ?, PRSTDATE = ?, PRENDATE = ?, MAJPROJ = ? WHERE PROJNO = ? // 更新のSQL文を読み込む statement = conn.prepareStatement(sqlConf.getProperty("ProjectModify")); // 更新項目をSQL文にセット statement.setString(1, projname); statement.setString(2, deptno); statement.setString(3, respemp); // プロジェクト工数が空なら0を入れる if (prstaff.length() == 0) { statement.setString(4, "0"); } else { statement.setString(4, prstaff); } statement.setString(5, FormatUtils.addHyphenToDate(prstdate)); statement.setString(6, FormatUtils.addHyphenToDate(prendate)); statement.setString(7, majproj); statement.setString(8, projno); statement.executeUpdate(); } 色々と調べてみたのですが、iteratorの内容をリストとしてjavaで取得する、という方法がわかりませんでした。ご教示お願いします。
- ベストアンサー
- Java
- チェックボックス設定の方法教えてください
チェックボックスの設定方法を教えてください。 項目1.大分類にチェックすると中分類と小分類にもチェックが入る。 項目2.中分類にチェックすると小分類にもチェックが入る。 項目2の設定はわかりますが、項目1の設定がどうしてもできません。 <script language=javascript> function allCheck(obj){ f=obj.form num=obj.name.replace("b","") for(var i=0;i<f.length;i++){ if(f[i].name=="s"+num) f[i].checked=obj.checked; } } </script> <FORM> <TABLE border=0> <TBODY> <TR> <TD class=color_1 rowSpan=4><INPUT onclick=allCheck(this) type=checkbox name=b1>大分類</TD> <TD class=color_1 rowSpan=4><INPUT onclick=allCheck(this) type=checkbox name=b1>中分類</TD> <TD class=color_1><INPUT type=checkbox name=s1>小分類</TD></TR> <TR> <TD class=color_2><INPUT type=checkbox name=s1>小分類</TD></TR> <TR> <TD class=color_1><INPUT type=checkbox name=s1>小分類</TD></TR> <TR> <TD class=color_2><INPUT type=checkbox name=s1>小分類</TD></TR> <TR> <TD class=color_1 rowSpan=3><INPUT onclick=allCheck(this) type=checkbox name=b2>中分類 <P></P></TD> <TD class=color_1><INPUT type=checkbox name=s2>小分類</TD></TR> <TR> <TD class=color_2><INPUT type=checkbox name=s2>小分類</TD></TR> <TR> <TD class=color_2><INPUT type=checkbox name=s2>小分類</TD></TR></TBODY></TABLE></FORM> すいませんが、教えて下さい。
- ベストアンサー
- JavaScript
- クリックされた罫表セルの行番号、列番号を取得するには
クリックされた罫表セルの行番号、列番号を取得する事は出来るのでしょうか。 例えば 下記Tableの"き"という文字が入ったセルをクリックすると 列番号:2 行番号:3 という番号を取得したいのです。 <table> <thead><tr><th>１</th><th>２</th><th>３</th><th>４</th></tr></thead> <tbody> <tr td>あ</td><td>い</td><td>う</td><td>え</td></tr> <tr><td>お</td><td>か</td><td>き</td><td>く</td></tr> <tr><td>け</td><td>こ</td><td>さ</td><td>し</td></tr> <tr><td>す</td><td>せ</td><td>そ</td><td>な</td></tr> </tbody> </table> onclickでidのついた所をクリックした時のアクションは取得できましたが、Csvなどからデータを取得したtableのセルをクリックした時の 列数、行数を取得する事は可能でしょうか。 宜しくお願いします。
- ベストアンサー
- JavaScript
- 何番目のクラスか取得するには
<table> <tr> <td> りんご </td> <td colspan="3" class="class_td"> <input name="color[]" value="1" type="checkbox"> </td> </tr> <tr> <td> みかん </td> <td colspan="3" class="class_td"> <input name="color[]" value="1" type="checkbox"> </td> </tr> <tr> <td> ぶどう </td> <td colspan="3" class="class_td"> <input name="color[]" value="1" type="checkbox"> </td> </tr> </table> チェックボックスにチェックを入れた場合、何番目のclass_tdに属するかを取得したいです。 例えば、みかんにチェックを入れた場合、2と取得できるようにしたいです。 $(this).index('.class_td')では-1となってしまいます。 ご教示頂けますと幸いです。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- テーブルの料金表の複雑な記述方法
練習でメニュー表作成をしているのですが、ややこしくてわかりません。。 やりたいことは、サービス内容と料金、ストレート、パーマ、トリートメントの色を同じに変更したいです。 ストレート、パーマ、トリートメントのところは右サイドの大人のところも料金も含めて色を変更したいです。 値段のところにclassを設定したから、縦には全部色を変えれるのですが、横にとなるとわかりません。 どのように記述すればよいでしょうか？ <table width="558" style="position: relative; top: -506px; left: 240px;"> <thead> <tr> <th rowspan="2" colspan="2"> サービス内容 </th> <th width="99" height="29" colspan="3"> 料金 </th> </tr> </thead> <tbody> <tr> </tr> <tr> <th width="165" rowspan="3"> カット </th> <td class="white" width="270"> 大人（一般） </td> <td class="price"> \4,200 </td> </tr> <tr> <td class="white"> 中学・高校生 </td> <td class="price"> \3,000 </td> </tr> <tr> <td class="white"> 小学生以下 </td> <td class="price"> \2,500 </td> </tr> <tr> <th> ストレート </th> <td class="white"> 縮毛矯正（カット・ブロー込） </td> <td class="price"> \8,600 </td> </tr> <tr> <th> パーマ </th> <td class="white"> カット・ブロー込 </td> <td class="price"> \5,200 </td> </tr> <tr> <th> カラー </th> <td class="white"> ファッションカラー </td> <td class="price"> \4,500 </td> </tr> <tr> <th rowspan="2"> トリートメント </th> <td class="white"> スペシャルプラチナ </td> <td class="price"> \2,300 </td> </tr> <tr> <td class="white"> スペシャルイオン </td> <td class="price"> \4,100 </td> </tr> </tbody> </table>
- ベストアンサー
- ホームページ作成ソフト
- メールフォームで必須項目の仕方
メールフォームで必須項目を入力しないと送信できないようにするにはどうすればいいでしょうか？ 現在は以下のとおりに書いてありますが、必須項目に書いてなくても送信できてしまいます。 <form method="post" action="CGI"> <h3>お問い合わせフォーム</h3> <p>*は必須項目です。</p> <table> <tbody> <tr> <th>お問い合わせ内容*</th> <td><textarea name="お問い合わせ内容" class="l" cols="40" rows="12"></textarea></td> </tr> <tr> <th>お名前（漢字）*</th> <td><input type="text" name="お名前（漢字）" class="m"></td> </tr> <tr> <th>お名前（フリガナ）*</th> <td><input type="text" name="お名前（フリガナ）" class="m"></td> </tr> <tr> <th>E-Mail*</th> <td><input type="text" name="E-mail" class="l"></td> </tr> <tr> <th>電話番号（半角）*</th> <td><input type="text" name="電話番号" class="l"></td> </tr> </tbody> </table> <input type="submit" value=" 送信 " class="button"></form> また必須項目が未入力のときにエラーメッセージ（「お名前が未入力です。」など）を出したいのですがどのようにすればいいですか？
- ベストアンサー
- CGI
- VB 解析
下記のソースコードを取得するまでは出来ましたが，そこから必要なデータを抜き出す方法が分らず 困っています． 抜き出したいのは，時などの文字列と<class="data_0_0">1017.5</td>の間の1017.5などの数値です． どなたかご教示よろしくお願いいたします． <tr class="mtx"><th rowspan="2">時</th><th colspan="2">気圧(hPa)</th><th rowspan="2">降水量<br>(mm)</th><th rowspan="2">気温<br>(℃)</th><th rowspan="2">露点<br>温度<br>(℃)</th><th rowspan="2">蒸気圧<br>(hPa)</th><th rowspan="2">湿度<br>(％)</th><th colspan="2">風向・風速(m/s)</th><th rowspan="2">日照<br>時間<br>(h)</th><th rowspan="2">全天<br>日射量<br>(MJ/m2)</th><th colspan="2">雪(cm)</th><th rowspan="2">天気</th><th rowspan="2">雲量</th><th rowspan="2">視程<br>(km)</th></tr> <tr class="mtx"><th>現地</th><th>海面</th><th>風速</th><th>風向</th><th>降雪</th><th>積雪</th></tr> <tr class="mtx" style="text-align:right;"><td style="white-space:nowrap">1</td><td class="data_0_0">1017.5</td><td class="data_0_0">1020.8</td><td class="data_0_0">--</td><td class="data_0_0">-3.3</td><td class="data_0_0">-5.3</td><td class="data_0_0">4.1</td><td class="data_0_0">86</td><td class="data_0_0">2.1</td><td class="data_0_0" style="text-align:center">北西</td><td class="data_0_0"></td><td class="data_0_0"></td><td class="data_0_0"></td><td class="data_0_0">26</td><td class="data_0_0"></td><td class="data_0_0"></td><td class="data_0_0"></td></tr>
- ベストアンサー
- Visual Basic
- テーブルの行削除について
以前、テーブルの行追加について教えてもらい出来ましたが 逆に、追加された行を削除する方法を教えてください。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS"> <TITLE>行追加・削除</TITLE> </HEAD> <BODY> <TABLE BORDER="1" id="Table1"> <TR> <TH>タイトルA</TH> <TH>タイトルB</TH> </TR> <TR> <TD><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="A" VALUE=""></TD> <TD><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="B" VALUE=""></TD> </TR> </TABLE> <INPUT TYPE="button" VALUE="行追加" onclick="addRow()"> <INPUT TYPE="button" VALUE="行削除"> <script language="JavaScript"> function addRow() { var tbl = document.getElementById("Table1").firstChild; if (!tbl.tagName) { tbl = document.getElementById("Table1"); } var tr = document.createElement("tr"); var td1 = document.createElement("td"); var tx1 = document.createElement("input"); tx1.setAttribute("type","text"); tx1.setAttribute("size","18"); tx1.setAttribute("maxlength","18"); tx1.setAttribute("name","Cn"); tx1.setAttribute("value",""); td1.appendChild(tx1); var td2 = document.createElement("td"); var tx2 = document.createElement("input"); tx2.setAttribute("type","text"); tx2.setAttribute("size","18"); tx2.setAttribute("maxlength","18"); tx2.setAttribute("name","Cn"); tx2.setAttribute("value",""); td2.appendChild(tx2); tr.appendChild(td1); tr.appendChild(td2); tbl.appendChild(tr); } </script> </BODY> </HTML>
- ベストアンサー
- JavaScript
- JS テーブルのアニメーション表示
JavaScript テーブルのアニメーション表示 ここに１つのテーブルがあります。 「すべて表示」にチェックを入れたら、すべての列を表示します。 「３大栄養素」にチェックを入れたら、３大栄養素の列だけ表示します。 次の仕様を満たすには、どのようなコードになりますか？ ＜仕様＞ ・「３大栄養素」は表の項目セルに「S３」クラスを付与 ・チェックボックスで列の表示制御をする ・表示・非表示はスライド・アニメーション ［HTML］ <div class="container"> <form name="form2"> <label><input name="check2" type="checkbox">３大栄養素</label> </form> <table id="tbl3"> <caption>イチジクの栄養価</caption> <thead> <tr> <th>状態</th> <th>エネルギー</th> <th>水分</th> <th class="S3">たんぱく質</th> <th class="S3">脂質</th> <th class="S3">炭水化物</th> <th>灰分</th> <th>飽和脂肪酸</th> <th>不飽和脂肪酸</th> <th>コレステロール</th> <th>食物繊維</th> </tr> </thead> <tbody> <tr> <th>生</th><td>54 kcal</td><td>84.6g</td><td>0.6g</td> <td>0.1g</td><td>14.3g</td><td>0.4g</td><td>0.02g</td> <td>0.07g</td><td>0</td><td>1.9g</td> </tr> </tr> <th>乾</th><td>291 kcal</td><td>18.0g</td><td>3.0g</td> <td>1.1g</td><td>75.3g</td><td>2.5g</td><td>0.17g</td> <td>0.60g</td><td>0</td><td>10.7g</td> </tr> </tbody> </table> </div>
- 締切済み
- JavaScript
お礼
丁寧な説明ありがとうございました。 明日早速教えていただいた通り確認させて頂きます。