動的な表の計算

質問

いつもお世話になります。
見よう見まねでやっている初心者です。
下記のような動的な表があります（PHPで表の行が可変します。）
name="aa"に入力された値とname="bb"に入力された値の足し算の
回答をname="kaito"に出したいと思っています。
計算ボタンを押すとname="kaito"に答えを出したいのですが、
以下のような式ですと当然ながら全く反応しません。

javascriptまたはPHPをどう記述すれば表の値を計算できるようになるのでしょうか？
できれば具体的に教えて頂ければ大変助かります。
ご教授の程よろしくお願い致します。

<script>
function keisan(){document.tasizan.kaito.value=(document.tasizan.aa.value)+(document.tasizan.bb.value)}
</script>
<form name="tasizan">
<table width="100" border="1">
<tr>
<th width="10" scope="col">a</th>
<th width="10" scope="col">b</th>
<th width="20" scope="col">回答</th>
</tr>
<tr>
<td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td>
<td><input type="button" value="計算" onclick="keisan()"/></td>
</tr>
<tr>
<td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td>
<td><input type="button" value="計算" onclick="keisan()"/></td>
</tr>
<tr>
<td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td>
<td><input type="button" value="計算" onclick="keisan()"/></td>
</tr>
<tr>
<td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td>
<td><input type="button" value="計算" onclick="keisan()"/></td>
</tr>
</table>
</form>

回答No.2

LancerVII · ベストアンサー

こんにちは。

PHPで行数が増えるところがどのようなロジックだからわからなかったので抽象的な回答になりました。

例えばforでループさせているとしたら
<?php for ( $i = 0; $i < 10; $i ++ ) { ?>
<input type="button" value="計算" onclick="keisan(<?= $i ?>)" />
<?php } ?>
とすれば0～9までのkeisan(0)～keisan(9)ができます。

whileでループさせているとしたら
<?php
$index = 0;
while ( ループ条件 {
?>
<input type="button" value="計算" onclick="keisan(<?= $index ?>)" />
<?php
$index++;
}
?>
になります。

ようするに回答内容の$indexをそのまま使ってもダメで自分の作ったPHPに合わせないとダメです。
1行出力するごとに1ずつ増える変数です。

お礼

LancerVII　さま
教えて頂いた通りでできました！
色々ご迷惑をおかけいたしまして本当に申し訳ありませんでした。
教えて頂いた通りやってみたら今度はうまくできました。
上の補足は私がただ単にコピーミスで</form> の位置が違っていて
取得できていなかったようです。
本当に助かりました。
またvar formObj = document.tasizan;のような書き方も勉強になりました。
ループの記述の仕方などと共に私にとって大きな一歩となったような気がします。本当にご親切にりがとうございました。大変感謝いたします。
また何かありましたら是非よろしくお願い致します。

補足

無知な私に何回もご回答いただいて本当にありがとうございます。
色々勉強になり、大変感謝いたします。
教えて頂いた通りwhileで
onclick="keisan(<?= $index ?>)の（）の中には順番に番号が入るようになりました。しかしながら　document.tasizan.aaは Null またはオブジェクトではありません。　となってしまい動いてくれません。var aa = document.tasizan.aa[index].value;で取得できていないようなのですが、
<td><INPUT type="text" name="aa" ></td>には何も記述しなくてこのままで大丈夫なのでしょうか？なぜ取得できないのか全く分かりません。
何か他に理由がありそうでしたらまた教えて頂ければ本当に助かります。
どうかよろしくお願い致します。

回答No.3

LancerVII

こんにちは。

無知なことは悪くないです。これから知識を高めれば良いです。
ただ、聞いているだけではダメで、パソコン壊れることはないのだからいろいろ試してみるのが一番力が付きます。
(いろいろ試してみた上であれば申し訳ございません)

確認するとしたら
1.document.tasizan自体は参照できるのか
参照できた場合、document.tasizanの中身は何か
参照できない場合、tasizanという要素があるか

><td><INPUT type="text" name="aa" ></td>には何も記述しなくてこのままで大丈夫なのでしょうか？

あとは、サンプルと見比べて違う場所を見つけて下さい。
PHP側でやることはどこのボタンか判断できるように先の$indexをつけるだけなのでJavaScript側のみの問題だと思います。
(PHP側で確認するとしたらきちんと行数と合っているか(先頭は0になる)を見てみて下さい)

それでもわからなかったら現状のソースを補足下さい。

回答No.1

LancerVII

こんにちは。

まずPHP側でこの行を出力している部分でボタンの部分にどのボタンが押されたかわかるようにindexを振ります。
print '<input type="button" value="計算" onclick="keisan('.$index.')" />';

次にJavaScriptのkeisan関数でそのindexを受け取るようにします。
function keisan ( index ) {}

最後に計算するところでそのindexを利用してaaまたはbbの値を取得します。

var aa = document.tasizan.aa[index].value;

これでその行のaaまたはbbが取得できるので計算して

document.tasizan.kaito[index].value = total;

合計を設定してあげればOKです。

==== 動作サンプル
http://hppg.moe.hm/okwave/qa/q7308141/

補足

LancerVII　さま
ご親切にサンプルまで付けて頂いてご回答ありがとうございます。
当方でonclick="keisan()"をonclick="keisan('.$index.')"に変えて
やってみていますが LancerVII　さまのようなkeisan(1)の（）に数字が入りませんでした。したがってうまく動作してくれません。
たぶん記述の仕方が私のはphpで動作しているのですが、テキスト入力欄が
表全部がPHPではなく、<input type="text" name="aa" value="<?= $aa ?>">
のように一部がPHPなっているので動作の仕方が違うのではないかと思っています。
本当に無知で大変お手数おかけいたしますが、できれば動作サンプルの記述をブラウザではな、ここに記述していただけないでしょうか？本当にお手数おかけいたしますが、どうかよろしくお願い致します。