apex:pageBlockTable内で、Javascriptで足し算

結構よくやるパターンだと思いますが、これまた毎回実装方法を調べ直してる気がするので、メモがてら。

<apex:pageBlockTable>や、<apex:repeat>なんかで動的に作られる要素をjavascriptでどうやって操作するかというお話。

やり方は色々あると思いますが、今回は$Componentを使う方法で実装してみました。

<apex:page standardController="Opportunity" extensions="EX_DataTableJsCalcController">
    <apex:form id="form">
        <apex:pageBlock title="商談商品" mode="edit">
            <apex:pageBlockSection>
                <apex:pageBlockTable value="{!opportunities}" var="item" id="table">
                    <apex:column >
                        <apex:facet name="header">{!$ObjectType.OpportunityLineItem.fields.UnitPrice.Label}</apex:facet>
                        <apex:inputField value="{!item.UnitPrice}" id="inputField1" onblur="sum(
                            '{!$Component.inputField1}', '{!$Component.inputField2}', '{!$Component.inputField3}'
                        );"/>
                    </apex:column>
                    <apex:column>
                        <apex:facet name="header">{!$ObjectType.OpportunityLineItem.fields.Quantity.Label}</apex:facet>
                        <apex:inputField value="{!item.Quantity}" id="inputField2" onblur="sum(
                            '{!$Component.inputField1}', '{!$Component.inputField2}', '{!$Component.inputField3}'
                        );"/>
                    </apex:column>
                    <apex:column>
                        <apex:facet name="header">{!$ObjectType.OpportunityLineItem.fields.TotalPrice.Label}</apex:facet>
                        <apex:inputField value="{!item.TotalPrice}" id="inputField3"/>
                    </apex:column>
                </apex:pageBlockTable>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>

    <script type="text/javascript">
        function sum (sumFieldId1, sumFieldId2, totalFieldId) {
            document.getElementById(totalFieldId).value =
              +document.getElementById(sumFieldId1).value + +document.getElementById(sumFieldId2).value;
        }
    </script>
</apex:page>

$Component.～～は、宣言した位置を基準として、子要素を取得する場合はそこまでのすべての要素のIDを辿らなくてはなりませんが、自身の兄弟や親に関しては単にそのタグのID指定のみで行けるので、今回のようにColumnの中で使っている分には、その兄弟要素である別のColumnを取得するにはID指定のみでいけます。
厳密に言うと<apex:column>の下の<apex:inputField>内で宣言してるため、他の<apex:column>の下の<apex:inputField>は兄弟ではなく親の兄弟の子なので、仕様から行くと取得できなさそうなのですが、何故かコレでいけました。<apex:column>ならではの動きなのかもしれません。