【Visualforce】JavascriptからgetElementByIdで値を参照する方法（ループ編）

前回【Visualforce】JavascriptからgetElementByIdで値を参照する方法を書いた時、ループの中のコンポーネントを参照する方法についてまったく触れていなかった。

ループの中のコンポーネントを参照したい場合は、コンポーネントパスに行番号を含めてあげる。こんな感じ（赤字の部分）。

document.getElementById('pg:frm:pb:pgs:pbt:1:tanka').value;

もうちょっと具体的なサンプルをば。

<!-- Visualforceページ -->
<apex:page id="pg" controller="LoopSampleController">
    <apex:form id="frm" >
        <table id="tbl" border="1">
            <tr bgcolor="#a9a9a9">
                <th>テキスト</th>
                <th>ボタン</th>
            </tr>
            <apex:variable id="index" var="index" value="0" />
            <apex:repeat id="rpt" var="sample" value="{!sampleList}">
                <tr>
                    <td><apex:inputField id="txt" value="{!sample.Text__c}" /></td>
                    <td><apex:commandButton id="btn" value="click" onclick="refValue('{!index}')"/></td>
                    <apex:variable var="index" value="{!VALUE(index)+1}"/>
                </tr>
        	</apex:repeat>
        </table>
    </apex:form>
    <script type="text/javascript">
    	function refValue(val) {
        	alert(document.getElementById('pg:frm:rpt:' + val + ':txt').value);
        }
    </script>
</apex:page>

/**
 * Controllerクラス.
 */
public class LoopSampleController {
	
    public List<Sample__c> sampleList{get; set;}
    
    /**
     * コンストラクタ.
     */
    public LoopSampleController() {
        this.sampleList = new List<Sample__c>();
        for (Integer i = 0; i < 5; i++) {
            Sample__c sample = new Sample__c();
            this.sampleList.add(sample);
        }
    }
}

ボタンがクリックされたら、その行のテキスト入力値をアラートで表示するというサンプルです。

行番号の取得の仕方はこの記事が参考。
【Visualforce+Apex】テーブルに連番を表示するサンプル

Javascriptへの値の渡し方はこの記事が参考。
【Apex+Visualforce】Javascriptに値を渡す簡単な書き方。apex:PageBlockTableやapex:repeat。

んでは、実際に動かしていくをばをば。