hachibeeDI/tablecalc.html

## tablecalc.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8" />
    </head>

    <body>
        <header>
            <h1>Table sum up calculation test</h1>
        </header>

    <table id="Test">
        <tbody>
        <tr>
            <td><input type="text" value="1" /></td>
            <td><input type="text" value="2" /></td>
            <td><input type="text" value="3" /></td>
       </tr>
       <tr>
           <td><input type="text" value="1" /></td>
           <td><input type="text" value="2" /></td>
           <td><input type="text" value="3" /></td>
       </tr>
        <tr>
            <td><input type="text" value="1" /></td>
            <td><input type="text" value="2" /></td>
            <td><input type="text" value="3" /></td>
        </tr>

       </tbody>
       <tfoot>
       <tr>
           <td>0</td><td>0</td><td>0</td>
       </tr>

       </tfoot>
    </table>

    <input type="button" id="btn1" value="calc"/>


<footer>
    <p>
        &copy; Copyright  by Administrator
    </p>
</footer>

<script type="text/javascript" src="./jquery-1.7.2.min.js" ></script>
<script>

$(function(){

    calcForTable = function () {
            /* tableコントロールのtbody内の列を足し合わせて
                tfooterへ合計を出力させる.
                行の指定の仕方、各要素など、作られているテーブルの形式に依存している.
                ex.
                var calc = common_calculate_utils.calcForTable("table_id");
                $(":text").change(function(){calc()});
            */

            // return : calculator
            var func = function (id) {
                // 何度も呼び出すものは、予めスコープ内にキャッシュする
                // TODO idを明示的に呼び出すのではなく、プラグインみたくid指定して決め打ちにする方がいい？
                console.log("define targ id = " + id);
                var targ_rows = $("table#" + id + " tbody tr");
                var row_result = $("table#" + id + " tfoot tr td"); // 計算結果を出力するための
                var results = [];
                var row_limit = targ_rows.length - 1;
                var col_limit = targ_rows[0].children.length - 1; // column.count()

                var calculator = function () { // クロージャ
                    for (i = 0; i <= col_limit; i++) { results[i] = 0; } //初期化&二度目以降対策。for-inは配列には使わない
                    console.log("calcstart");
                    for (row_h = 0; row_h <= row_limit; row_h++) {
                        var targ_row = targ_rows[row_h];
                        for (col_j = 0; col_j <= col_limit; col_j++) {
                            // table tbodyのtd内の要素にinputが入っているとする
                            console.log("colindex = " + col_j);
                            console.log("td val = " + $(targ_row.children[col_j]).children(0).val() || 0);
                            results[col_j] += parseInt($(targ_row.children[col_j]).children(0).val() || 0);
                        }
                    }
                    console.log(results);
                    // フッター中の要素に結果を出力
                    for (res_k = 0; res_k <= col_limit; res_k++) {
                        console.log(results[res_k]);
                        $(row_result[res_k]).text(results[res_k]);
                    }
                }
                return calculator;
            }
            return func;
        }();

        var calc = calcForTable("Test");
        $("#btn1").click(function(){calc();});
});

</script>

    </body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8" />
	</head>

	<body>
	<header>
	<h1>Table sum up calculation test</h1>
	</header>

	<table id="Test">
	<tbody>
	<tr>
	<td><input type="text" value="1" /></td>
	<td><input type="text" value="2" /></td>
	<td><input type="text" value="3" /></td>
	</tr>
	<tr>
	<td><input type="text" value="1" /></td>
	<td><input type="text" value="2" /></td>
	<td><input type="text" value="3" /></td>
	</tr>
	<tr>
	<td><input type="text" value="1" /></td>
	<td><input type="text" value="2" /></td>
	<td><input type="text" value="3" /></td>
	</tr>

	</tbody>
	<tfoot>
	<tr>
	<td>0</td><td>0</td><td>0</td>
	</tr>

	</tfoot>
	</table>

	<input type="button" id="btn1" value="calc"/>


	<footer>
	<p>
	© Copyright by Administrator
	</p>
	</footer>

	<script type="text/javascript" src="./jquery-1.7.2.min.js" ></script>
	<script>

	$(function(){

	calcForTable = function () {
	/* tableコントロールのtbody内の列を足し合わせて
	tfooterへ合計を出力させる.
	行の指定の仕方、各要素など、作られているテーブルの形式に依存している.
	ex.
	var calc = common_calculate_utils.calcForTable("table_id");
	$(":text").change(function(){calc()});
	*/

	// return : calculator
	var func = function (id) {
	// 何度も呼び出すものは、予めスコープ内にキャッシュする
	// TODO idを明示的に呼び出すのではなく、プラグインみたくid指定して決め打ちにする方がいい？
	console.log("define targ id = " + id);
	var targ_rows = $("table#" + id + " tbody tr");
	var row_result = $("table#" + id + " tfoot tr td"); // 計算結果を出力するための
	var results = [];
	var row_limit = targ_rows.length - 1;
	var col_limit = targ_rows[0].children.length - 1; // column.count()

	var calculator = function () { // クロージャ
	for (i = 0; i <= col_limit; i++) { results[i] = 0; } //初期化&二度目以降対策。for-inは配列には使わない
	console.log("calcstart");
	for (row_h = 0; row_h <= row_limit; row_h++) {
	var targ_row = targ_rows[row_h];
	for (col_j = 0; col_j <= col_limit; col_j++) {
	// table tbodyのtd内の要素にinputが入っているとする
	console.log("colindex = " + col_j);
	console.log("td val = " + $(targ_row.children[col_j]).children(0).val() \|\| 0);
	results[col_j] += parseInt($(targ_row.children[col_j]).children(0).val() \|\| 0);
	}
	}
	console.log(results);
	// フッター中の要素に結果を出力
	for (res_k = 0; res_k <= col_limit; res_k++) {
	console.log(results[res_k]);
	$(row_result[res_k]).text(results[res_k]);
	}
	}
	return calculator;
	}
	return func;
	}();

	var calc = calcForTable("Test");
	$("#btn1").click(function(){calc();});
	});

	</script>

	</body>
	</html>