- ベストアンサー
一覧から選択した行の行番号を取得について
- 一覧画面で選択ボタンを押した行の行番号を取得する方法について質問です。現在はalertを使用して行番号を確認していますが、うまく取得できません。どのようにすれば選択した行の行番号を取得できるでしょうか。
- また、取得した行番号に対応する行のある項目にシステム日付を表示させたいです。具体的な方法を教えていただけますか。
- お手数ですが、よろしくお願いします。
- 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では一番左のセルに格納されます。（ボタンは消えます）
お礼
丁寧な説明ありがとうございました。 明日早速教えていただいた通り確認させて頂きます。