数値入力項目をカンマ区切りで再表示

ColdFusion Javascript

元記事はこちらです。

■Application.cfm

<cfprocessingdirective pageEncoding = "UTF-8">
<cfsetting enableCFoutputOnly="yes">

<cfapplication name="#hash( getCurrentTemplatePath() )#">

■index.cfm

<!---/////////////////////////////////////////////////////////////////

表形式の縦横計算

    ・数値のみ入力
    ・カンマ区切りで表示
    ・入力されるたびに合計計算

//////////////////////////////////////////////////////////////////--->
<cfset request.row=3>
<cfset request.col=3>
<cfif findNoCase("ie", cgi.HTTP_USER_AGENT)>
    <cfset request.js_chkNum = "
        if(event.keyCode<'0'.charCodeAt(0) || event.keyCode>'9'.charCodeAt(0)) return false;
    ">
<cfelse>
    <cfset request.js_chkNum = "
        if(event.charCode<'0'.charCodeAt(0) || event.charCode>'9'.charCodeAt(0)) return false;
    ">
</cfif>

<cfset local = structNew()>

<cfoutput>
<html>
<head>
    <title>test</title>
    <style TYPE="text/css">
    <!--
    th {
        background-color:gainsboro;
        }
    -->
    </style>
</head>
<body>

<form name="frm">
<table>
    <tr>
        <td>&nbsp;</td>
        <cfloop index="local.col" from="1" to="#request.col#">
            <th>#local.col#</th>
        </cfloop>
        <th>ROW TOTAL</th>
    </tr>
    <cfloop index="local.row" from="1" to="#request.row#">
    <tr>
        <th>#local.row#</th>
        <cfloop index="local.col" from="1" to="#request.col#">
            <td>
                <input type="text" name="fld_#local.row#_#local.col#" style="text-align:right;" value="0"
                    onKeyup="js_sum(this, #local.col#, #local.row#)"
                    onKeypress="#request.js_chkNum#"
                    onFocus="this.select()">
            </td>
        </cfloop>
        <td>
            <input type="text" name="fld_row_#local.row#_ttl" style="text-align:right;" readonly>
        </td>
    </tr>
    </cfloop>
    <tr>
        <th>COL TOTAL</th>
        <cfloop index="local.col" from="1" to="#request.col#">
            <td>
                <input type="text" name="fld_col_#local.col#_ttl" style="text-align:right;" readonly>
            </td>
        </cfloop>
    </tr>
</table>
</form>

<script language="JavaScript" type="text/javascript">
<!--
function js_sum(obj, col, row){
    with(document.frm){
        <cfif findNoCase("ie", cgi.HTTP_USER_AGENT)>
            //タブの場合
            if(event.keyCode==9){
                obj.focus();
                return;
            }
        </cfif>

        //行の合計
        ttl = 0;
        for(i=1;i<=#request.col#;i++){
            tmp = eval("fld_"+row+"_"+i+".value");
            tmp = delComma1(tmp);
            ttl = ttl + eval(tmp);
        }
        eval("fld_row_"+row+"_ttl").value = insertComma1(ttl.toString());

        //列の合計
        ttl = 0;
        for(i=1;i<=#request.row#;i++){
            tmp = eval("fld_"+i+"_"+col+".value");
            tmp = delComma1(tmp);
            ttl = ttl + eval(tmp);
        }
        eval("fld_col_"+col+"_ttl").value = insertComma1(ttl.toString());

        //入力した数値をカンマ表示に変換
        tmp = delComma1(obj.value);
        tmp = insertComma1(tmp.toString());
        obj.value = tmp;
    }
}
//カンマ挿入関数
function insertComma1(sourceStr) {
    var destStr = sourceStr;
    var tmpStr = "";
    while (destStr != (tmpStr = destStr.replace(/^([+-]?\d+)(\d\d\d)/,"$1,$2"))) {
        destStr = tmpStr;
    }
    return destStr;
}

//カンマ削除関数
function delComma1(w) {
    var z = w.replace(/,/g,"");
    return (z);
}
//-->
</script>

</body>
</html>
</cfoutput>