プロが教える店舗＆オフィスのセキュリティ対策術

insertRowメソッド内で計算式を書く方法

解決済

  • 質問者：iroha_168
  • 質問日時：
  • 回答数：1件

http://jsajax.com/Articles/TableInsertRow/157を参考に、[行を挿入]ボタンをクリックすると最終行の下に行が追加され、その中にテキストボックスを配置し計算を行うようにしたいと思い、下記のソースを記述しました。
そして追加した行で正常に計算を行うために、insertRow内のinnerHTMLのgoods_a_3の3の部分を動的に設定したり、calc内の計算式を動的にループさせる必要があると思ったのですが、どのように記述すれば良いか分からなかったため、アドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。

<script type="text/javascript">
<!--
window.onload = function() {
document.getElementById("btnInsert").onclick = insertRow;
}
function insertRow() {
var tbl = document.getElementById("Table1");
var row = tbl.insertRow(2);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = "<input type=\"text\" name=\"goods_a_3\" size=\"3\" value=\"0\" onchange=\"calc();\" />*";
cell2.innerHTML = "<input type=\"text\" name=\"goods_b_3\" size=\"3\" value=\"0\" onchange=\"calc();\" />=";
cell3.innerHTML = "<input type=\"text\" name=\"ans3\" size=\"8\" value=\"0\" disabled=\"disabled\" />";
}
function calc(){
document.form1.ans1.value = document.form1.goods_a_1.value * document.form1.goods_b_1.value;
document.form1.ans2.value = document.form1.goods_a_2.value * document.form1.goods_b_2.value;
}
// -->
</script>
</head>
<body>
<form action="#" name="form1" id="form1">
<table id="Table1" border="1">
<tr>
<td><input type="text" name="goods_a_1" size="3" value="0" onchange="calc();" />*</td>
<td><input type="text" name="goods_b_1" size="3" value="0" onchange="calc();" />=</td>
<td><input type="text" name="ans1" size="8" value="0" disabled="disabled" /></td>
</tr>
<tr>
<td><input type="text" name="goods_a_2" size="3" value="0" onchange="calc();" />*</td>
<td><input type="text" name="goods_b_2" size="3" value="0" onchange="calc();" />=</td>
<td><input type="text" name="ans2" size="8" value="0" disabled="disabled" /></td>
</tr>
</table>
</form>
<br />
<input id="btnInsert" type="button" value="行を挿入" />

以上、よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： yamada_g
  • 回答日時：

たとえばこんな風にするとかでしょうか。



<script type="text/javascript">
<!--
window.onload = function() {
document.getElementById("btnInsert").onclick = insertRow;
}
function insertRow() {
var tbl = document.getElementById("Table1");
//最終行をテーブルの行数から判断するようにする
var len = tbl.rows.length;
var row = tbl.insertRow(len);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);

//nameを動的に設定、calcの引数に自オブジェクトを設定するようにする
cell1.innerHTML = "<input type=\"text\" name=\"goods_a_" + (len+1) +"\" size=\"3\" value=\"0\" onchange=\"calc(this);\" />*";
cell2.innerHTML = "<input type=\"text\" name=\"goods_b_" + (len+1) +"\" size=\"3\" value=\"0\" onchange=\"calc(this);\" />=";
cell3.innerHTML = "<input type=\"text\" name=\"ans" + (len+1) + "\" size=\"8\" value=\"0\" disabled=\"disabled\" />";
}

//引数を追加
function calc(inputObj) {
// formを取得
var frm = inputObj.form;
// nameの数字部分を取得（とりあえず桁数で決め打ち）
var id = inputObj.name.substring(8);
// 計算
frm.elements['ans' + id].value = frm.elements['goods_a_' + id].value * frm.elements['goods_b_' + id].value;
}
// -->
</script>
</head>
<body>
<form action="#" name="form1" id="form1">
<table id="Table1" border="1">
<tr>
<td><input type="text" name="goods_a_1" size="3" value="0" onchange="calc(this);" />*</td>
<td><input type="text" name="goods_b_1" size="3" value="0" onchange="calc(this);" />=</td>
<td><input type="text" name="ans1" size="8" value="0" disabled="disabled" /></td>
</tr>
<tr>
<td><input type="text" name="goods_a_2" size="3" value="0" onchange="calc(this);" />*</td>
<td><input type="text" name="goods_b_2" size="3" value="0" onchange="calc(this);" />=</td>
<td><input type="text" name="ans2" size="8" value="0" disabled="disabled" /></td>
</tr>
</table>
</form>
<br />
<input id="btnInsert" type="button" value="行を挿入" />

入力文字の数値チェックとかをしていませんが、参考になれば幸いです。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。
ご教示いただいたソースを試したところ、意図した動作となりました。

このたびはどうもありがとうございました。
以上、よろしくお願いします。

通報する
お礼日時：2011/04/25 11:46

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報